Basically there are three types of directives in Angular2 according to documentation. Component Structural directives Attribute directives Component It is also a type of directive with template,styles and logic part which is most famous type of directive among all in Angular2. In this type of directive you can use other directives whether it is custom … Read more
Here is a high level overview. Suppose you define your template like this: <span *ngFor=”let item of items”>{{item}}</span> Then it’s transformed to the following by the compiler: <ng-template let-item [ngForOf]=”items”> <span>{{item}}</span> </ng-template> Then Angular applies ngForOf directive to the template element. Since this directive’s host element is template, it injects the templateRef. It also injects … Read more
You can just inject it class MyDirective { constructor(private host:MyComponent) {} A severe limitation is, that you need to know the type of the component in advance. See also https://github.com/angular/angular/issues/8277 It also provides some workarounds for when you don’t know the type in advance.
The AngularJS team recommends that controller code that depends on scope bindings be moved into an $onInit function. function LayoutController($scope, LayoutDTO, LayoutPreviewDTO) { var self = this; this.$onInit = function () { // bindings will always be available here // regardless of the value of `preAssignBindingsEnabled`. self.layoutDTO = LayoutDTO; self.layoutPreviewDTO = LayoutPreviewDTO; var test = … Read more
Asterisk syntax is a syntatic sugar for more wordy template syntax which directive expands to under the hood, you are free to use any of these options. Quote from the docs: The asterisk is “syntactic sugar”. It simplifies ngIf and ngFor for both the writer and the reader. Under the hood, Angular replaces the asterisk … Read more
To set the disabled property to true or false use <button [disabled]=”!nextLibAvailable” (click)=”showNext(‘library’)” class=” btn btn-info btn-xs” title=”Next Lib”> {{libraries.name}}”> <i class=”fa fa-chevron-right fa-fw”></i> </button>
you need to include tr as well in selector like below, @Component({ selector: ‘tr[my-component]’, template: ` <td>{{data1.prop1}}</td> <td>{{data1.prop2}}</td> <td>{{data2.prop1}}</td> ` }) export class MyComponent { @Input() data1; @Input() data2; } Check this Plunker!!
Alternative Solution: This answer of Thierry Templier is an alternative way to get around the problem. After some questions with Thierry Templier, I came to the following working example that meets my expectations as an alternative to inheritance limitation mentioned in this question: 1 – Create custom decorator: export function CustomComponent(annotation: any) { return function … Read more
As a general (see Stackblitz here: https://stackblitz.com/edit/angular-gh2rjx): HTML <select [(ngModel)]=”selectedOption”> <option *ngFor=”let o of options”> {{o.name}} </option> </select> <button (click)=”print()”>Click me</button> <p>Selected option: {{ selectedOption }}</p> <p>Button output: {{ printedOption }}</p> Typescript export class AppComponent { selectedOption: string; printedOption: string; options = [ { name: “option1”, value: 1 }, { name: “option2”, value: 2 } … Read more
No, directives can’t be added or removed dynamically. They are only applied to HTML statically added to component templates. What you could do is to enable/disable the directive by passing a parameter (@Input()) to the directive to notify it to do something or not.