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>.
Related
How can I import html file into the function of typescript file?
I am creating chrome extension using Angular and I am facing an issue to import html into the function of ts file.
I have login.component.ts file.
There is one function, name is init().
This init() function will be called from some another file let's say it's content-script.js (which is in root and it'll be call every time when page is reload/chrome extension will attach).
I have another file login.component.html.
I want to attach my login html in div classes of some website. So i will fetch that div classes from the website and have to attach this login html file into that div classes.
For ex.
content-script.ts
import {LoginComponent} from './app/user/login.component'
var loginComponent : LoginComponent = new LoginComponent();
loginComponent.init();
login.component.ts
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
init() => {
let element = 'here we need templateUrl which is login.component.html'
$('.my-website-class> div > div > .tempclass').last().after(element);
}
}
login.components.html
<div>Attach this login html file into the login component ts file</div>
This "element" should be my login.component.html file.
So How can i fetch this html/templateUrl file into ts file and attach it with website's div?
In Angular js, we were using something like this.
var loginButtonTemplate = require('./login_button.html');
var scope = $rootScope.$new();
var loginButton = $compile(loginButtonTemplate)(scope);
$('.my-website-class> div > div > .tempclass').last().after(loginButton);
Thank you!
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'm learning angular2, What I'm basically trying to do is to create a component, that (some how), could contain other components.
I mean, I want a to create a component Card that could have content inside.
This is an example:
<Card>
<span>Some Content</span>
</Card>
I want to could re-use Card many times, how can I create a component like that?
You can use the directive <ng-content></ng-content> in your component's template to insert the content at that location.
If you're using TypeScript (which angular recommends), you can import a component with a selector defined, add it as directive and use the selector in the HTML of the encompassing component. This can be done as follows:
cards.ts
import { Component } from '#angular/core';
#Component({
selector: 'card',
template: '<span>Some Content</span>'
})
export class CardComponent {
}
container.ts
import { Component } from '#angular/core';
import { CardComponent } from './cards.ts';
#Component({
directives: [CardComponent],
template: '<div><card></card><card></card></div>'
})
export class ContainerComponent {
}