Using Angular, how Can I add dynamically a component on click ? (Not only one)

Question

To learn Angular I'm coding a to-do list. I've created a component task with a title (task name) and status (a boolean related to a checkbox input) parameters.

<div>
  <div>{{title}} <button>Edit</button></div>
  <input type="checkbox" value={{status}}>
</div>

I've also created a ToDoList component which contain a title(name of the to-do list, and a tab with a list of task name to generate multiple task component using a *ngFor.

<div>
  <h1>{{title}}</h1>
  <app-task *ngFor="let title of list" [title]="title" status="true"></app-task>
  <button (click)="appTaskDirective">Add a task</button>
</div>

Now I want to add dynamically task components on click on the "Add a task button" while using the appTaskDirective but I just can't figure it out.

The angular document example can't help.

Here is my appTaskDirective file:

import { Directive, ViewContainerRef, TemplateRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appTaskDirective]'
})

export class TaskDirectiveDirective implements OnInit {
  constructor(public viewContainer:ViewContainerRef) { }
}

Thanks.

Answer 1

first of all you can't pass a directive to the click event. If you want to use the directive to listen to the click event you have to attach an hostlistener to the directive like this

In directive

import { Directive, ViewContainerRef, TemplateRef, OnInitHostListener } from '@angular/core';

@Directive({
  selector: '[appTaskDirective]'
})

export class TaskDirectiveDirective implements OnInit {
  constructor(public viewContainer:ViewContainerRef) { }
    @HostListener('click') onClick() {
     // do something
    }
}

In component

<div>
  <h1>{{title}}</h1>
  <app-task *ngFor="let title of list" [title]="title" status="true"></app-task>
  <button appTaskDirective>Add a task</button>
</div>

But I don't see why you need to do all these though. You can just listen to the event in the component and update the tasklist accordingly

In component html

<div>
 <h1>{{title}}</h1>
 <app-task *ngFor="let title of list" [title]="title" status="true"></app-task>
 <button (click)="addNewTask()">Add a task</button>
</div>

In component ts

addNewTask() {
   this.list.push('A new Task');
}

Hope this helps :)