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 {
}
Related
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.
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/
This is my app.hbs file, when i click the link it should be highlighted,Please help me how to do this.I am new to Ember and cannot find a clear solution to it. I am having ember version 2.18.
{{#link-to 'adduser' id="addlink" }}MANUAL ADD {{/link-to}}</div>
<br>
{{#link-to 'csvadd' class="button"}}
CSV ADD
{{/link-to}}
You should create a component that can handle the state of clicked/active or not.
Your template can look something like this:
<span {{action "transitionToRoute"}}>
<a>{{linkText}}</a>
</span>
Your js file looks like this:
import Component from '#ember/component';
import { inject as service } from '#ember/service';
export default Component.extend({
router: service(),
classNameBindings: ['highlighted'],
highlighted: false.
actions: {
transitionToRoute() {
this.set('highlighted', true);
this.get('router').transitionTo(this.get('route'));
}
}
});
And, if you call your component hughlightedLink you would use it like this:
{{highlighted-link route="addUser" linkText="Add User"}}
Of course you would have to define the css highlighted class to style the span like you want to
I've got a hybrid Angular 1/2 web app that uses Bootstrap Select (BS) for selects. With it you can set a data-content attribute on <option> elements that BS takes and inserts into the select options (with <ul> and <li> elements).
I've got the following Angular2 components:
#Component({
selector: 'my-select',
template: `
<select>
<option data-content="<my-other-component></my-other-component> Foo Bar">Foo Bar</option>
</select>`
})
export class MySelectComponent {}
#Component({
selector: 'my-other-component',
template: '<span>Hello</span>',
})
export class MyOtherComponent {}
As you can see there's a component in the data-content attribute in the template for MySelectComponent. However, it does not get processed by Angular2.
The select itself is picked up by BS properly and generates a nicely styled select, but the component inside the data-content isn't parsed. The generated HTML for the option looks like this:
<li><my-other-component></my-other-component> Foo Bar</li>
... instead of this:
<li><span>Hello</span> Foo Bar</li>
I know this is a bit of a specific question, but has anyone run into this before or have any idea how I can make this work?
You will have to import your component and also include your component inside directives meta-data like below:
import {MyOtherComponent} from '.app/my-other-component.component'
#Component({
selector: 'my-select',
template: `
<select>
<option data-content="<my-other-component></my-other-component> Foo Bar">Foo Bar</option>
</select>`,
directives: [MyOtherComponent]
})
export class MySelectComponent {}
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>.