Angular Forms In Depth

Your Name · Your Name · commit a8bb14884760 · 2021-01-29T15:04:54.000+01:00
diff --git a/src/app/create-course/create-course-step-3/create-course-step-3.component.html b/src/app/create-course/create-course-step-3/create-course-step-3.component.html
@@ -5,7 +5,7 @@ <h3>Add Course Lessons:</h3>
 
     <ng-container formArrayName="lessons">
 
-        <ng-container *ngFor="let lessonForm of lessons.controls">
+        <ng-container *ngFor="let lessonForm of lessons.controls; let i = index">
 
             <div class="lesson-form-row" [formGroup]="lessonForm">
 
@@ -28,7 +28,8 @@ <h3>Add Course Lessons:</h3>
 
                 </mat-form-field>
 
-                <mat-icon class="delete-btn">delete_forever</mat-icon>
+                <mat-icon class="delete-btn" (click)="deleteLesson(i)">
+                    delete_forever</mat-icon>
 
             </div>
 
diff --git a/src/app/create-course/create-course-step-3/create-course-step-3.component.ts b/src/app/create-course/create-course-step-3/create-course-step-3.component.ts
@@ -31,4 +31,14 @@ export class CreateCourseStep3Component {
 
         this.lessons.push(lessonForm);
     }
+
+    deleteLesson(lessonIndex: number) {
+        this.lessons.removeAt(lessonIndex);
+    }
 }
+
+
+
+
+
+

Original file line number	Diff line number	Diff line change
`@@ -31,4 +31,14 @@ export class CreateCourseStep3Component {`
`31`	`31`
`32`	`32`	`this.lessons.push(lessonForm);`
`33`	`33`	`}`
	`34`	`+`
	`35`	`+ deleteLesson(lessonIndex: number) {`
	`36`	`+ this.lessons.removeAt(lessonIndex);`
	`37`	`+ }`
`34`	`38`	`}`
	`39`	`+`
	`40`	`+`
	`41`	`+`
	`42`	`+`
	`43`	`+`
	`44`	`+`