I am currently working on an Angular 10 project where I have to add native HTML-elements like div, table, p, h1 to the DOM (this could be achieved in Angular with the DomSanitizer) from the TypeScript class. But I also want to create an Angular component inside an created div.
Because creating just one component is easy with the ComponentFactoryResolver.
For example, this should be created from Typescript dynamically:
<div>
<my-component></my-component>
</div>
How can I achieve this?
Kind regards,
Steve
I think is this what you're looking for:
import {Component} from '#angular/core';
#Component({
selector: 'example',
templateUrl: '<my-component></my-component>',
styleUrls: ['./example.component.scss']
})
export class ExampleComponent {
}
You don't need <div> unless you use him for style or other thing.
Related
I want 2 components in an angular 6 application
I wish first component to use bootstrap min.css file , and the other not
how can i implement this
you can use ViewEncapsulation for that.
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
encapsulation: ViewEncapsulation.ShadowDom
})
Using shadow dom ensures that your base project styling will not be applied.
I'm creating Ionic 4 Angular app, and creating header section.in the header section i'm using ion-toolbar.when i has been use css class test in ion-icon but css class not working.below given stackblitz link.
my ion-toolbar example, see home page
You have to set the correct css file for your page.
For example in home.ts, change the #Component block to the following and it will work correctly
#Component({
selector: 'page-home',
templateUrl: 'home.html',
styleUrls: ['home.css']
})
Use this one styleUrls: ['/home.css']
I have a component and its HTML file.
component:
hello-world.component.ts
import {Component} from 'angular2/core';
#Component({
selector: 'hello-world',
templateUrl: 'hello-world.html'
})
export class HelloWorld {
yourName: string = '';
}
Template:
hello-world.html:
<label>Name:</label>
<h1>Hello {{yourName}}!</h1>
Now, I have other html template.html which has no component, for example it contain,
template.html
<h1>Welcome to template file</h1>
<p> This is an example file </p>
Now, I wanted to include template.html file in the hello-world.html. How can I do that.
In Angular1 I used to do,
<div ng-include src="'template.html'"></div>
How can I do it in Angular2? I am very new to Angular2.
I searched this question in many places, every one is giving an answer which has components. but didn't get my required solution.
Short: isn't possible yet out of the box.
You could create a Directive like old ng-include which will do the work for you..
That Directive would load the html-file and then paste it to the DOM
I've researched and read everything I can find on the issue I'm having, but I can't seem to get any of the proposed solutions to work. I'm building an application using Angular 2 and MDL that takes customer orders and displays them on MDL cards. Sometimes orders have errors, which I want to display on hover utilizing the MDL tooltip, but it won't work for me. The application is set up to make an API call to fetch incoming orders and then display them using the MDL card template using *ngFor. All that works great.
Here's the portion of my template that contains the MDL tooltip:
<div id="id{{order.order_id}}" class="error-icon-div">
<div class="icon material-icons error-icon" *ngIf="order.error">
error
</div>
</div>
<div class="mdl-tooltip mdl-tooltip--large" attr.data-mdl-
for="id{{order.order_id}}">
{{order.error}}
</div>
Since you can't use the same ID more than once, I'm generating a unique ID for each card/order by taking the string 'id' and adding the order ID. I know this works because I can see it when I inspect the elements in the browser's dev tools.
I read that I should set each component's encapsulation to none like this:
encapsulation: ViewEncapsulation.none
I've done that. I also read that I should use the componentHandler to upgrade the DOM, which I've tried two different ways.
First I tried it like this:
ngAfterViewInit() {
componentHandler.upgradeDom();
};
I also tried it like this:
ngAfterViewInit() {
componentHandler.upgradeAllRegistered();
};
None of this has worked.
I discovered that if I simply set the id equal to a string instead of doing it dynamically with Angular that it works, but then I encounter the issue of how to generate a unique ID for every order/card.
I'm wondering if this is some sort of timing issue, and that even though when inspecting the element in dev tools I see the id rendered the way I expect it to be, MDL doesn't see it that way. I tried using setTimeout to delay ngAfterViewInit() from being called a second or two, but to no avail.
Any help would be greatly appreciated.
I've gotten MDL to work with Angular2. I had to set it in the ngAfterViewChecked event.
In App.Component.ts:
import $ from 'jquery';
import { Component, AfterViewChecked, ViewEncapsulation, Inject } from '#angular/core';
import { AccountService } from '../services/account.service';
import { User } from '../models/user.model';
import 'material';
#Component({
selector: 'my-app',
templateUrl: 'app/components/app.component.html',
styleUrls: ['...', 'dist/vendors.min.css'],
encapsulation: ViewEncapsulation.None //for ui framework to work normally
})
export class AppComponent implements AfterViewChecked {
constructor(
private accountService: AccountService,
#Inject('User') public user : User ) {
}
ngAfterViewChecked() { //need to start ui frameworks quite late.
componentHandler.upgradeAllRegistered();
}
}
In this example, from the official Angular 2 docs, the decorator looks like this:
#Component({
selector: 'my-app',
template: '<h1>My First Angular App</h1>'
})
Example: would prefer not not have my HTML code littered with non-standard elements, and would prefer something like (NB: ng-angular is only an example I would like to see):
import { Component } from '#angular/core';
#Component({
template: '<h1>Wait! Bloody wait some more.</h1>'
})
export class ListComponent { }
and used something like this:
<div ng-component="List"</div>
Or is the a Component decorator like this used only when you want to create a new HTML element, and then stick to a plain Listcontroller for the div in my example above?
A selector is not always needed eg. you have a top component of a module that is loaded by router and displayed in
selector is needed for any other type of component. otherwise angular wouldn't know what component it should render.
I haven't heard about attribute "ng-component"
[EDIT]
kit effectively answered correctly in his/her first comment:
You have to create an element that would enclose your template however it doesn't have to be a new HTML element because selector can be a element, [attribute] or class, eg.
<div test>
could be an element for component with selector: '[test]'
A component is a new HTML element, something like <my-component>Hello</my-component>.
I think what you want is a directive.
An Attribute directive changes the appearance or behavior of a DOM element.
So you can do something like <div makeItBlue>Blue stuff</div>
Just to elaborate: The selector can be a standard CSS-selector, so your HTML can be non-angular-centric.
Example:
#Component({
selector: 'div.player-list',
...
})
export class PlayerList {
}
will match <div class="player-list and-possibly-some-other-classes">...</div> (i.e. replacing the div with your angular template)