Skip to content

Commit 65fdc23

Browse files
mr-dev-dragonmr-dev-dragon
committed
add
1 parent 5900571 commit 65fdc23

File tree

3 files changed

+50
-56
lines changed

3 files changed

+50
-56
lines changed

‎bash-ng/src/app/app.module.ts‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,13 @@ import { AppComponent } from './app.component';
66
import { FormComponent } from './form/form.component';
77
import { ReactiveFormsModule } from '@angular/forms';
88
import { ReactiveFormComponent } from './reactive-form/reactive-form.component';
9-
9+
import { NgClass } from '@angular/common';
1010

1111

1212
@NgModule({
13-
declarations: [
14-
AppComponent,
15-
FormComponent,
16-
ReactiveFormComponent
17-
],
18-
imports: [
19-
BrowserModule,
20-
AppRoutingModule,
21-
FormsModule,
22-
ReactiveFormsModule
23-
],
13+
declarations: [AppComponent, FormComponent, ReactiveFormComponent],
14+
imports: [BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule],
2415
providers: [],
25-
bootstrap: [AppComponent]
16+
bootstrap: [AppComponent],
2617
})
27-
export class AppModule { }
18+
export class AppModule {}

‎bash-ng/src/app/reactive-form/reactive-form.component.html‎

Lines changed: 43 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,18 @@
1919
A simple warning alert—check it out!
2020
</div>
2121
</div>
22-
<div class="col-6 shadow p-3 mb-5 bg-body rounded">
22+
23+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
24+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
25+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
26+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
27+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
28+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
29+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
30+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
31+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
32+
33+
<div class="col-6 shadow p-3 mb-5 mx-5 bg-body rounded">
2334

2435
<form class="row g-3" [formGroup]="porfileForm" (ngSubmit)="onSubmit()">
2536

@@ -99,15 +110,35 @@
99110

100111
</form>
101112
</div>
102-
<div class="col">
103-
<div class="accordion" id="accordionExample">
113+
114+
115+
116+
117+
118+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
119+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
120+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
121+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
122+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
123+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
124+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
125+
126+
<div class="col ">
127+
<div class="accordion shadow p-3 mb-5 bg-body rounded ml-5" id="accordionExample" >
104128

105129

106130
<div class="accordion-item">
107131
<h2 class="accordion-header" id="headingOne">
108-
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
109-
aria-expanded="true" aria-controls="collapseOne">
110-
First name
132+
<button
133+
(click)="status=!status"
134+
135+
136+
[ngClass]="status ? 'show' : 'accordion-button'"
137+
class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
138+
aria-expanded="true"
139+
aria-controls="collapseOne"
140+
>
141+
First name
111142
</button>
112143
</h2>
113144
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
@@ -216,30 +247,14 @@ <h2 class="accordion-header" id="headingTwo">
216247
<div id="collapseTwo" class="accordion-collapse collapse " aria-labelledby="headingTwo"
217248
data-bs-parent="#accordionExample">
218249
<div class="accordion-body">
219-
220-
221-
222-
223-
<div class="accordion-item">
224-
<h2 class="accordion-header" id="headingTwo">
225-
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
226-
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
227-
Zip
228-
</button>
229-
</h2>
230-
<div id="collapseTwo" class="accordion-collapse collapse " aria-labelledby="headingTwo"
231-
data-bs-parent="#accordionExample">
232-
<div class="accordion-body">
233-
234-
</div>
235-
</div>
236-
</div>
237-
250+
</div>
251+
</div>
252+
</div>
238253
<div class="accordion-item">
239254
<h2 class="accordion-header" id="headingTwo">
240255
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
241256
aria-expanded="false" aria-controls="collapseTwo">
242-
Zip
257+
Zip
243258
</button>
244259
</h2>
245260
<div id="collapseTwo" class="accordion-collapse collapse " aria-labelledby="headingTwo"
@@ -251,22 +266,12 @@ <h2 class="accordion-header" id="headingTwo">
251266
</div>
252267

253268

254-
<div class="accordion-item">
255-
<h2 class="accordion-header" id="headingThree">
256-
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
257-
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
258269

259-
</button>
260-
</h2>
261-
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
262-
data-bs-parent="#accordionExample">
263-
<div class="accordion-body">
264270

265271

266272

267-
</div>
268-
</div>
269-
</div>
273+
274+
270275
</div>
271276

272277
</div>

‎bash-ng/src/app/reactive-form/reactive-form.component.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { VirtualTimeScheduler } from 'rxjs';
1919
})
2020
export class ReactiveFormComponent implements OnInit {
2121
porfileForm: FormGroup;
22+
status: boolean = false;
2223

2324
constructor(private fb: FormBuilder) {
2425
this.porfileForm = this.fb.group({
@@ -48,9 +49,7 @@ export class ReactiveFormComponent implements OnInit {
4849
});
4950
}
5051

51-
ngOnInit(): void {
52-
53-
}
52+
ngOnInit(): void {}
5453

5554
get First_name() {
5655
return this.porfileForm.get('First_name');
@@ -60,7 +59,6 @@ export class ReactiveFormComponent implements OnInit {
6059
console.log(this.porfileForm);
6160
}
6261

63-
6462
}
6563

6664

0 commit comments

Comments
 (0)