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 {}
Related
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 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
What I want to do
I want to create a reusable Angular 2 button component that may render as an <a /> tag or an <input /> tag depending on an input to the component called type. I want the button component to accept content children which will be rendered as the button label.
To illustrate: an Angular template that invokes my button component like so:<button>Hello</button> should render as <a>Hello</a> in the DOM. However, if a property type="submit" is set (e.g. <button type="submit>Hello</button>) then the output in the DOM should be <input type="submit">Hello</input>.
To further clarify, if I were using React I could create [an overly simplified version of] this component with:
const Button = ({ type, children }) =>
type === "submit"
? <input type="submit">{children}</input>
: <a>{children}</a>
Where I'm stuck
Creating an Angular component that displays content children using <ng-content /> was relatively straightforward. However, I'm yet unable to render those children inside a dynamically chosen tag - either <a /> or <input /> depending on the value of the type property.
What I've tried
I initially tried to use <ng-content /> inside an ngIf or ngSwitch directive, only to find out that <ng-content /> can appear at most once in any given template (unless it’s qualified with a selector). However, I want to output all content children so selectors are not helpful.
I keep finding references to DynamicComponentLoader, but that appears to be deprecated.
I've seen the ContentChildren decorator which would allow my button component to access the content children being passed to it, but I'm not sure how to then take those children and inject them into my component template.
I came across NgTemplateOutlet, which seems like it might help me switch between two entirely different templates (one w/ the <a /> tag and one with the <input /> tag). However that's marked as “Experimental” and I’m having trouble understanding the usage.
Any help would be greatly appreciated!!
#Component({
selector: 'adapting-button',
template: `
<a *ngIf="type !== "submit">{{value}}</a>
<input *ngIf="type === "submit" type="submit" [value]="value">
`,
})
export class AdaptingButtonComponent {
#Input() type: any;
#Input() value: any;
}
#Component({
selector: 'app-root',
templateUrl: `
<adapting-button [type]="'submit'" [value]="Hello"></adapting-button>
`,
})
export class AppComponent {
title = 'app works!';
}
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 {
}