How to call an Angular component on click event [Angular]

Question

I'm not an expert in Angular. I followed some answers from internet also. Specially this. I've a button from where I want to call a user defined method onPress.

app.component.html

<div class="dls-menu-item" style="float: right;">
    <button (click)="onPress()"></button>
</div>

<div id="comp-render">
        <-----Here i want that component to be rendered
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    ...
})
export class AnalyticsComponent implements OnInit {
    constructor() {}

    ngOnInit() {}


    onPress() {
        console.log("clicked");
        document.querySelector('#comp-render').innerHTML='<object type="text/html" data="mycomp.html" ></object>';
    }
}

Where mycomp.html is:

<h1>Hello</h1>
<p>This is a custom component.</p>
<button>Click</button>

Can anyone please tell me how to do it.

You want to when you click onPress you display your mycom.html? — Patricio Vargas
– Patricio Vargas, Commented Nov 11, 2019 at 4:03
@devpato. Yes Sir exactly. Actually right now mycomp.html may look stupid but once i know how it is done, then i will extend its code further. — Tanzeel
– Tanzeel, Commented Nov 11, 2019 at 4:06

Patricio Vargas · Accepted Answer · 2019-11-11 04:17:58Z

13

<div class="dls-menu-item" style="float: right;">
    <button (click)="onPress()"></button>
</div>

<div id="comp-render" *ngIf="display">
    <mycomp></mycomp>
</div>

app.component.ts file

 ...
 display = false;
 onPress() {
   this.display = true;
   /*if you want the component to show and hide on click pressed, use 
   use this line
   this.display = !this.display;*/
 }

Working code:

https://stackblitz.com/edit/angular-d21pkn

edited Nov 11, 2019 at 4:17

answered Nov 11, 2019 at 4:09

Patricio Vargas

5,60014 gold badges57 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joel Joseph Over a year ago

alternatively you can also add new component as sub route using a combination of router and router-outlet then navigate to the route on button click

Collectives™ on Stack Overflow

How to call an Angular component on click event [Angular]

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related