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

Question

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:

How can I replace and append to a certain component's view (since the view consists of multiple components)?

Optional question:

Is there a way to append directly to DOM? Since Angular doesn't properly use the DOM that doesn't sound like a viable solution to me and hence is optional.

I found this angular.io/api/core/Renderer2 but I don't know how to implement it — Munchkin
– Munchkin, Commented Nov 19, 2019 at 11:56
You could simply set the [innerHTML] value of a div which you reference via its id. something like <div #hereMyTag> and in .ts: hereMyTag.innerHtml = "your inserted HTML" — Chund
– Chund, Commented Nov 19, 2019 at 11:59
I managed to get Renderer2 implemented, but it prints out my HTML as a string, so it's not fitting -_- — Munchkin
– Munchkin, Commented Nov 20, 2019 at 10:30

Munchkin · Accepted Answer · 2019-11-19 12:59:37Z

1

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>

edited Nov 19, 2019 at 12:59

Munchkin

1,1095 gold badges30 silver badges65 bronze badges

answered Nov 19, 2019 at 11:58

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

7 Comments

Munchkin Over a year ago

Doesn't appear to work, I do not use routing though, maybe that's the mistake? Please check the updated question.

Adrita Sharma Over a year ago

You want to replace whole html it just some variables

Munchkin Over a year ago

I forgot to add to view.html. Now I get

'app-dashboard' is not a known element: 1. If 'app-dashboard' is an Angular component, then verify that it is part of this module. 2. If 'app-dashboard' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

,

Can't bind to 'data' since it isn't a known property of 'app-dashboard'. 1. If 'app-dashboard' is an Angular component and it has 'data' input, then verify that it is part of this module. 2. If 'app-dashboard' is a Web Component then add 'CUSTOM_ELEMENTS..

Adrita Sharma Over a year ago

Is dashboard component is added in the same module?

Munchkin Over a year ago

I just added it in app.component.html and it gives me these errors

|

user12207064 · Accepted Answer · 2019-11-19 14:15:03Z

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.

This is more of a comment than an answer without a provided fitting example

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Related