angular2-directives

How to append dynamic DOM elements from a directive in Angular 2?

by

Use Renderer provided by Angular to manipulate the DOM: import { DOCUMENT } from ‘@angular/common’; export class MyDirective implements OnInit { constructor( private elementRef: ElementRef, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) { } ngOnInit() { const child = this.document.createElement(‘div’); this.renderer.appendChild(this.elementRef.nativeElement, child); } } This doesn’t depend on the native DOM API like appendChild(), so … Read more

Angular2: replace host element with component’s template

by

This you should get what you want: @Component({ selector: ‘ul[my-list]’, template: ` <ng-content></ng-content> ` }) export class MyList { } @Component({ selector: ‘li[my-item]’, template: ` <ng-content></ng-content> ` }) export class MyItem { … } <ul my-list> <li my-item>One</li my-item> <li my-item>Two</li my-item> </ul my-list>

How to get width of (DOM) Element in Angular2

by

I don’t know a way to get the width from the host element without accessing nativeElement but setting could be done like: @HostListener(‘window:resize’, [‘$event.target’]) onResize() { this.resizeWorks(); } @HostBinding(‘style.height.px’) elHeight:number; private resizeWorks(): void { this.elHeight = this.el.nativeElement.width; } If you can add an element inside your components template like <div style=”width: 100%;” #div (window:resize)=”elHeight = … Read more

When to use square brackets [ ] in directives @Inputs and when not?

by

When you use [] to bind to an @Input(), it’s basically a template expression. The same way displaying {{abc}} wouldn’t display anything (unless you actually had a variable called abc). If you have a string @Input(), and you want to bind it to a constant string, you could bind it like this: [myText]=” ‘some text’ … Read more

How to Unit Test a Directive In Angular 2?

by

Testing compiled directive using TestBed Let’s say you have a following directive: @Directive({ selector: ‘[my-directive]’, }) class MyDirective { public directiveProperty = ‘hi!’; } What you have to do, is to create a component that uses the directive (it can be just for testing purpose): @Component({ selector: ‘my-test-component’, template: ” }) class TestComponent {} Now … Read more

deneme bonusu veren sitelerbahis casinomakrobetceltabetpinbahispolobetpolobet girişpinbahis girişmakrobet girişpulibet girişmobilbahis girişkolaybet giriş