CODEWITHSUNDEEP
angularangular8angular-components
Munchkin
Munchkin

Reputation: 1085

How to replace and append a component's view in Angular?

So I infiltrate some HTML code into my app using this code:

fetchDashboard() {
    const requestOptions: Object = {
      headers: new HttpHeaders().append('Authorization', 'Bearer <tokenhere>'),
      responseType: 'text'
    }
    this.http.get<string>('http://localhost:3000/avior/dashboard',
        requestOptions)
            .subscribe(response => {
                   // replace me with modification of component view
                   console.log(response);
            }
    );
}

I execute this code in my view with <a class="dropdown-item" (click)=fetchDashboard()>Dashboard</a>

For the optimal solution:

Optional question:

Upvotes: 1

Views: 486

Answers (2)

user12207064
user12207064

Reputation:

ng-template is the proper tool for conditionally displaying "complex content".

Instead of writing down a long winded answer, I will just provide the link to a blog post at Angular University: https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/ Because I'm on mobile.

It compares ng-template ng-container and more.

There are more blogs dealing with those topics than this mentioned blog. It was the first result when googling for ng-template.

Upvotes: 0

Adrita Sharma
Adrita Sharma

Reputation: 22213

Try like this:

.ts

.subscribe(response => {
     this.aComponentData = response;
}

view.html:

<a-component [data]="aComponentData"></a-component>

<b-component></b-component>

a.component.ts

@Input() data: string;

a.component.html

<div [innerHtml]="data"></div>

Upvotes: 1

Related Questions