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.
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>
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 want to render incoming text from an API as subsequent HTML and component template.
Most of the solutions I found here use #ViewChild to inject the components but that doesn't work for me since I need to iterate the same behavior for all items in the *ngFor loop.
This is how the code would look like:
The template of the component rendering the incoming messages:
<div *ngFor="let item of messages">
<compile-component [template]="item.html"></compile-component>
</div>
Incoming message structure (item.html):
<my-component></my-component><div>Some html</div>
Component to compile:
#Component({
selector: 'my-component',
template: '<div>It works</div>',
styleUrls: ['./my-component.component.css']
})
export class MyComponent{ }
Output would look like this:
<div>It works</div><div>Some html</div>
I am looking for the solution for compile-component here.
Any help is much appreciated. Thanks in advance.
You should be able to do that via ComponentFactoryResolver. See angular docs about this here:
https://angular.io/guide/dynamic-component-loader
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>.
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 {
}