Dynamic component adding in angular2

Question

In angular 2 my app has the following

<my-app>

<item></item>
<item></item>
<item></item>
<item></item>

</my-app>

At some point of time the system will send notification so, it has to add the notification component to "". How can we achieve this. Which concept we use in angular 2

<my-app>

<item></item>
<item></item>
<item></item>
<item></item>

<notification></notification>

</my-app>

Answer 1

I believe you are looking for ngIf. ngIf allows you to display content based on a condition. This can either be an expression or simply a boolean.

As an example, you can set the notification to display only when a variable called 'notify' is true, or else it will not display. Place this in your HTML template for that example:

<notification *ngIf="notify"></notification>

Change if it's displayed by changing the variable in your component.ts file.

export class MyComponent {

    notify = false;

    displayNotificaiton() {
        this.notify = true;
    }

}

You may also want to read over the ngIf documentation.

https://angular.io/docs/ts/latest/api/common/index/NgIf-directive.html