Angular - Show components dynamically

Question

I have three angular components. One is a footer component, which is displayed as a footer for the page. One is a chat component, that can be called from anywhere. One is the main app component, where my website layout is written.

I would like to include a link in the footer, that renders the chat component present in the app component. The chat component should be rendered only on the click of the link in the footer.

HTML for footer component:

<a (click)="showChatWindow()">Show Chat Window</a>

HTML for chat component:

<div class="chatbox">
  <div class="chatHeader">
    Chat Window
  </div>
<div class="chatBody">
    Chat Body
  </div>
<div class="chatFooter">
    Chat Footer
  </div>
</div>

App Component. It has app-chatbot and app-footer :

<div class="main-container">
    <app-header class="header"></app-header>
    <div class="content-container">
        <app-main-nav></app-main-nav>
        <div class="main-content">
            <div class="content-area">
                <router-outlet></router-outlet>
                <app-chatbot></app-chatbot>
            </div>
            <app-footer class="footer"></app-footer>
        </div>
    </div>
</div>

Answer 1

You could use an *ngIf and eventEmitter looking like so. Here are the docs for the *ngIf and the eventEmitter. Just be sure you are importing the eventEmitter and the output. Parent being the component that has the footer and chat in the html, child being the footer.

Solution

child

<a (click)="sendNotification()">Show Chat Window </a>

And then in the footer component

public @Output() notifyParent: EventEmitter<any> = new EventEmitter();

public sendNotification(): void
{
    this.notifyParent.emit();
}

Then moving back to you parent it should look like so.

Parent

<div class="main-container">
    <app-header class="header"></app-header>
    <div class="content-container">
        <app-main-nav></app-main-nav>
        <div class="main-content">
            <div class="content-area">
                <router-outlet></router-outlet>
                <app-chatbot *ngIf="showChat"></app-chatbot> //important line
            </div>
            <app-footer (notifyParent)="toggleDisplay($event)" class="footer">
            </app-footer>
        </div>
    </div>
</div>

Which means in the parent component you would have the function

public showChat: boolean = false;

public toggleDisplay(data): void
{
    this.showChat = !this.showChat
}

And that should toggle your display for you.

Explination

The function above will toggle it to hide and show, if you just want it to show set the boolean to true. The *ngIf will ensure the component is not rendered until it is set to true. This leaves you to get creative as to how you want to toggle / set to true with the boolean.

The event emitter is used to send a message from the child to the parent that is then running the function to toggle the boolean that is being used by the *ngIf. There are many ways around component interaction within Angular, see the documentation they provide.

Answer 2

You should store a boolean variable on your app-component called something like "chatShown". When you click showChatWindow(), have that function toggle that chatShown boolean to true. Have the chat-component in your app-component already -with an *ngIf="chatShown", something like <chat-component *ngIf="chatShown"></chat-component>

Answer 3

You can use a flag and pass it as a parameter to the function of the click event of the link:

<a (click)="showChatWindow(flag)">Show Chat Window</a>

In the corresponding component declare a flag variable (You can initialize it in false in the constructor):

public flag: boolean;

public constructor(){
    this.flag = flase;
}

and in the function do the following:

public showChatWindow(f)
{
    this.flag = f ? false: true;
}

And finally in the main component template:

<app-chatbot *ngIf="flag"></app-chatbot> 

The function acts as an on / off switch.