I am trying to set the content of a DOM-Element with innerHTML, but it doesn't work as I expect it. The content which I want to set is an a Tag with id and href as attributes, however the id attribute isn't there on the rendered content.
Example Code:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
template: `<div [innerHTML]="html"></div>`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular';
html = 'link';
}
Any help is welcome.
You should use bypassSecurityTrustHtml method to tell angular that this html is safe to use.
html = this.sanitizer.bypassSecurityTrustHtml('link');
constructor(private sanitizer: DomSanitizer){}
Working Stackblitz
Related
This question already has answers here:
Angular HTML binding
(24 answers)
Closed 6 years ago.
I don't know what am doing wrong as no errors are report.
I have a component class
import { Component, OnInit, ViewContainerRef } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
testhtml = "<p>Hello world</p>";
constructor(){}
}
}
And in my template file, I do something like this:
<div class="blog-post">[innerHtml]="testhtml"</div>
But this doesn't seem to work. Is there something else I need to import?
I am using angular-cli "version": "1.0.0-beta.26",
Angular uses {{property}} for interpolation of values. That is the way that you would display plain text in your div, like so
Solution 1:
<div class="blog-post">{{testhtml}}</div>
But that will write out text, not HTML.
For HTML, you will need to bind to the property
Solution 2:
<div class="blog-post" [innerHtml]="testhtml"></div>
Note I moved the [innerHtml] to inside the div tag.
Leaving out the square brackets would bind to the attribute, so you would need to interpolate again
Solution 3:
<div class="blog-post" innerHtml="{{testhtml}}"></div>
The property binding (Solution 2) is the preferred method.
You have to add attributes inside the tag like this.
<div class="blog-post" [innerHtml]="testhtml"></div>
Actually, i have one HTML file which contains all the code. I want to split this one on multiple files and to include them.
How can i do this?
Thanks a lot.
Let's say you have this html:
<div class="componentA">ComponentA</div>
<div class="componentB">ComponentB</div>
and this code is into the `AppComponent. You can split this two div into two component:
ComponentA.ts
#Component({
selector: 'componentA',
templateUrl: 'componentA.component.html',
styleUrls: ['componentA.component.scss'],
)}
export class ComponentA {
}
ComponentA.html
<div class="componentA">ComponentA</div>
ComponentB.ts
#Component({
selector: 'componentB',
templateUrl: 'componentB.component.html',
styleUrls: ['componentB.component.scss'],
)}
export class ComponentB {
}
ComponentB.html
<div class="componentB">ComponentB</div>
then into your AppComponent.html :
<componentA></componentA>
<componentB></componentB>
You need to write the second Component - Angular Components
Add this component to your App.module.ts - Angular Modules
If you have business logic you can also provide this by Services - Angular Services
In addition to answers above, don't forget to include
import { Component } from '#angular/core';
in your both components ts file.
In Angular4, property binding on the view (.html) picks up the value from the logic file (.ts)
This works well in the code:
<img [src]="sourceValue">
This too works well in the code:
<button [disabled]="isDisabled">
Why does this not work?
<p [style]="paragraphStyle"> This is a paragraph.</p>
abc.component.ts
isDisabled:boolean = true;
sourceValue:string = "./assets/hermione.jpg";
paragraphStyle:string = "background:red; color:yellow";
I know the usage of ngStyles and ngClass, I simply want to ask why property binding is not working in the above case. It is finally --- just a simple "Inline CSS Styling" if value is taken from .ts file and added to the html snippet in front of 'style' property in paragraph.
It's because of security Measures:
#Angular docs
Angular defines the following security contexts:
HTML is used when interpreting a value as HTML, for example, when
binding to innerHtml.
Style is used when binding CSS into the style property.
URL is used for URL properties, such as <a href>.
Resource URL is a URL that will be loaded and executed as code,
for example, in <script src>.
The Fix is to sanitize values beforehand using bypassSecurityTrustStyle()- Bypass security and trust the given value to be safe style value (CSS).
#Angular docs
WARNING: calling this method with untrusted user data exposes your
application to XSS security risks!
Component:
import { Component, SecurityContext } from '#angular/core';
import { DomSanitizer, SafeHtml } from '#angular/platform-browser';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
paragraphStyle;
constructor(private _sanitizer: DomSanitizer){
this.paragraphStyle=this._sanitizer.bypassSecurityTrustStyle("background-color:red");
}
HTML
<p [style]="paragraphStyle"> This is a paragraph.</p>
NOTE:
For style property name use dash-case.
For example, font-weight ,background-color
Live Demo
I think you can do it but you have to do it like so:
[style.background]="'red'"
Something like this
<app-component1>
<app-component2></app-component2>
</app-component1>
I did't find about it in Angular docs. When I use component in component, it shows nothing
You need to add <ng-content></ng-content> in the template file for <app-component1> where you wish to include <app-component2></app-component2>.
For example, below could be the HTML file for the component1:-
<div>
<ng-content></ng-content> <!-- component 2 inserted here -->
</div>
Yes, You can nesting component
#Component({
selector: 'app-root',
directives: [MyChildComponent]
template: '<div><ChildComponent></ChildComponent></div>'
})
export class AppComponent {}
#Component({
selector: 'ChildComponent',
template: '<h2>Child component</h2>'
})
export class MyChildComponent {}
https://codecraft.tv/courses/angular/quickstart/nesting-components-and-inputs/
I am developing an application using Angular2.
I have a component with the following template:
<div>
<router-outlet></router-outlet>
</div>
Can someone please help me how to load an external URL 'www.example.com' in this div?
Just create a component to render inside <ng-outlet> by using the routing config.
Then you component template inside should have an <iframe> pointing to your external site.
import {Component, OnInit} from '#angular/core';
#Component({
selector: 'app-external-page',
templateUrl: './external-page.component.html',
styleUrls: ['./external-page.component.css']
})
export class ExternalPageComponent implements OnInit {
title = 'app works!';
constructor(private _stellarService: StellarService) {
}
ngOnInit(): void {
}
}
Then your component template should look like
<div>
<iframe src="yourexternalpage url"></iframe>
</div>
Having a code like the one above, only remaining step if to configure a route in your routing.
did you get answer for this ?
You can have a component as mentioned here . Import and add it to your NgModule; After that import it in the page you want and use the selector instead of <router-outlet>.