angular2-directives | 易学教程

Angular2, TypeScript, How to read/bind attribute value to component class (undefined in ngOnInit) [duplicate]

阅读更多关于 Angular2, TypeScript, How to read/bind attribute value to component class (undefined in ngOnInit) [duplicate]

问题 This question already has answers here : Angular 2 external inputs (4 answers) Closed 3 years ago . can someone please advice me how to read/bind attribute value to @component class, which seems to be undefined in ngOnInit method? Here's a plunker demo: http://plnkr.co/edit/4FoFNBFsOEvvOkyfn0lw?p=preview I'd like to read value of "someattribute" attribute <my-app [someattribute]="'somevalue'"> inside the App class (src/app.ts) ngOninit method. Thanks! 回答1: You can notice that such parameters

Angular2 ngFor skip first index [duplicate]

阅读更多关于 Angular2 ngFor skip first index [duplicate]

问题 This question already has an answer here : angular2 - skip first item in ngFor (1 answer) Closed 3 years ago . How can I skip the first index from the array? <li *ngFor="#user of users"> {{ user.name }} is {{ user.age }} years old. </li> 回答1: You could use the slice pipe. <li *ngFor="#user of users | slice:1"> {{ user.name }} is {{ user.age }} years old. </li> The first parameter corresponds to a positive integer representing the start index. 回答2: There is the SlicePipe for this use case: <li

How [class] [attr] [style] directives work

阅读更多关于 How [class] [attr] [style] directives work

I examined ngStyle, ngClass directives here but I still couldn't understand how these work: <div [attr.role]="myAriaRole"> <div [class.extra-sparkle]="isDelightful"> <div [style.width.px]="mySize"> Built-in directives don't select such an attribute: class.extra-sparkle . What kind of selector can select such html attribute? Which built-in directive handles this? As far as I know html attributes with dot ( style.width.px ) are not legal already. Apparently the string withing square brackets don't passed directly as attributes. But where it is done? Which directive catches these notations? You

Angular structural directive: wrap the host element with some another component

阅读更多关于 Angular structural directive: wrap the host element with some another component

I have simplest Angular structural directive: import { Directive, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[hello]' }) export class HelloDirective { constructor( private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { this.viewContainer.createEmbeddedView(this.templateRef); } } I use it this way: <div *hello>Hello Directive</div> It shows me "Hello Directive" message as expected. Now I want to change the content by wrapping it with some another component: <my-component>Hello Directive</my-component> And I want the directive to do

Angular 2 + Semantic UI , component encapsulation breaks style

阅读更多关于 Angular 2 + Semantic UI , component encapsulation breaks style

I'm using Angular2 with Semantic UI as a css library. I have this piece of code: <div class="ui three stakable cards"> <a class="ui card"> ... </a> <a class="ui card"> ... </a> <a class="ui card"> ... </a> </div> the cards are rendered nicely with a space between and such. like this: refer to cards section in the link since the cards represent some kind of view I thought of making a component out of it, so now the code is: <div class="ui three stakable cards"> <my-card-component></my-card-component> <my-card-component></my-card-component> <my-card-component></my-card-component> </div> but now

Angular2: what expressions can we interpolate in template

阅读更多关于 Angular2: what expressions can we interpolate in template

问题 I read that we can interpolate Javascript expressions. What is the list of valid Javascript expressions that we can interpolate? So far for interpolation I have a displayed property, eg. object.property , short expressions like {{1+1}} what else Javascript expressions can we interpolate? 回答1: Expressions in Angular2 are very similar to expressions in Angular in terms of the scope of what they allow. JavaScript expressions that promote side effects are prohibited including Assignment (= +=, -=

*ngFor is not working in angular 2

阅读更多关于 *ngFor is not working in angular 2

问题 app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { routing } from './app.routing'; import { HttpModule, JsonpModule } from '@angular/http'; import { LoginComponent } from './auth/login.component'; import { SignupComponent } from './register/signup.component'; import { HomeComponent } from './home/home.component'; import {

Controlling order of directive evaluation in Angular 2

阅读更多关于 Controlling order of directive evaluation in Angular 2

问题 I want to create an attribute directive in Angular 2. It needs to have a click handler on its host. The click handler needs to be added before the other directives on the element are evaluated because it controls access to certain functionality. In Angular 1, you could do this with the priority option when creating a directive. Is there some sort of equivalent in Angular 2? Thanks, Chase 回答1: priority in Angular 2 is not supported, and there isn't any plan to add it. Component directives may

Angular 2 Input Directive Modifying Form Control Value

阅读更多关于 Angular 2 Input Directive Modifying Form Control Value

I have a simple Angular 2 directive that modifies the input value of a textbox. Note that i'm using the Model-Driven form approach. @Directive({ selector: '[appUpperCase]' }) export class UpperCaseDirective{ constructor(private el: ElementRef, private control : NgControl) { } @HostListener('input',['$event']) onEvent($event){ console.log($event); let upper = this.el.nativeElement.value.toUpperCase(); this.control.valueAccessor.writeValue(upper); } } The dom updates properly, however the model updates after every other keystroke. Take a look at the plnkr This thrills me because I encountered

Angular 2/4 : How to check length of input's value using directive?

阅读更多关于 Angular 2/4 : How to check length of input's value using directive?

I've created one custom attribute directive that can validate input, It has value or not. Please refer below code. I don't know why if condition is not working, in console.log it is showing 0 only. is there anything wrong in my code? I tried with other angular's app lifecycle event too. Thanks! import { Directive, ElementRef, Input, AfterContentInit ,Renderer } from '@angular/core'; @Directive({ selector: '[inputfocus]' }) export class InputFocusedDirective implements AfterContentInit { public valLength; constructor(public el: ElementRef, public renderer: Renderer) {} ngAfterContentInit() {