angular-template

Event to fire when an angular *ngIf statement evaluates in template

家住魔仙堡 提交于 2019-11-28 02:53:40
问题 If I have the following: <div *ngIf="user$ | async as user" class="container"> <p>user.name</p> </div> Is there a way I can execute code when the div above finally appears on screen? 回答1: The ngIf will remove that DOM element and all attached components/directives. So you can just write a simple directive that executes an event when it's first created. When the ngIf transitions from false to true the directive will be created (again, and again, etc...) @Directive({selector: '[after-if]'})

How to style ng-content

依然范特西╮ 提交于 2019-11-27 23:22:40
问题 Am following this tutorial on transclusion https://scotch.io/tutorials/angular-2-transclusion-using-ng-content However there is no mention on how to style elements that end up replacing ng-content. It seems that I can only target those element in the css if preceeded by the /deep/ keyword, which is normally used when targeting a nested component. Is this correct? 回答1: update ::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom https://developer

Angular2, evaluate template from string inside a component

我的梦境 提交于 2019-11-27 21:36:09
It's possible evaluate template from string in a variable?. I need place the string in the component instead of the expression, e.g. template: "<div>{{ template_string }}</div>" template_string contains: <b>{{ name }}</b> and all should be evaluated to <div><b>My Name</b></div> but I see <div>{{ template_string }}</div> I need something like {{ template_string | eval }} or something else to evaluate the content of the variable on current context. It's possible? I need something to use this approach because template_string can be changed when the component is used. Edit1: Angular Version: 4.0.3

Is there a way to get the HTML template for an Angular* component?

|▌冷眼眸甩不掉的悲伤 提交于 2019-11-27 18:32:11
问题 I'm trying to create a library of shared Angular components to use across a number of different web projects. Along with the shared component library, I'm trying to create a web project that contains and displays all of those components and code examples as to how to use them. As seen from other queries related to a similar question, in order to display HTML code in a webpage in in <pre> or <code> tags, certain aspects of those HTML snippets need to have HTML encoded characters(i.e. > needs

Get reference to a directive used in a component

我怕爱的太早我们不能终老 提交于 2019-11-27 18:27:21
I have a component whose template looks something like this: <div [my-custom-directive]>Some content here</div> I need access to the MyCustomDirective class instance used here. When I want to get access to a child component, I use a ViewChild query. Is there an equivalent feature to get access to a child directive? Abdulrahman You can use exportAs property of the @Directive annotation. It exports the directive to be used in the parent view. From the parent view, you can bind it to a view variable and access it from the parent class using @ViewChild() . Example With a plunker : @Directive({

Pass parent scope value into ng-repeat loop in Angular

放肆的年华 提交于 2019-11-27 18:19:04
This should be an extremely simple question, but all of the workarounds I've found are complex. I'm looping through an array of objects in using ng-repeat in a template as follows: <div class="row-fluid" ng-repeat="message in messages.current|filter:'draft'"> {{ message.subject }} ... {{ campaign.name }} ... </div> Since the ng-repeat creates a new scope, the 'campaign' object from the controller doesn't seem to be accessable. Is there any way (aside from adding the campaign object to every item in my array) of getting that value? Thanks in advance. You can access the parent scope by using

Can you prevent an Angular component's host click from firing?

廉价感情. 提交于 2019-11-27 17:56:27
问题 I'm creating an Angular component that wraps a native <button> element with some additional features. Buttons do not fire a click event if they're disabled and I want to replicate the same functionality. i.e., given: <my-button (click)="onClick()" [isDisabled]="true">Save</my-button> Is there a way for my-button to prevent onClick() from getting called? In Angular you can listen to the host click event this way, and stop propagation of the event: //Inside my-button component @HostListener(

Angular 2 - How does ng-bootstrap provide the NgbRadioGroup and NgbButtonLabel to their NgbRadio directive?

試著忘記壹切 提交于 2019-11-27 16:48:19
问题 Here is the label code: import {Directive} from '@angular/core'; @Directive({ selector: '[ngbButtonLabel]', host: {'[class.btn]': 'true', '[class.active]': 'active', '[class.disabled]': 'disabled', '[class.focus]': 'focused'} }) export class NgbButtonLabel { active: boolean; disabled: boolean; focused: boolean; } and here is the radio button code: import {Directive, forwardRef, Input, Renderer2, ElementRef, OnDestroy} from '@angular/core'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from

How to apply multiple template bindings on one element in angular [duplicate]

北战南征 提交于 2019-11-27 11:02:28
问题 This question already has an answer here: *ngIf and *ngFor on <td></td> element [duplicate] 4 answers I'm using template like following: <ul [ngClass]="{dispN: !shwFilter,'list-group':true,'autoS':true,'dispB':shwFilter,'myshddw':true}" style=";display: none"> <li *ngIf="itsNotF && itsNotF.length" [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" *ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff"> <div *ngIf="valm1 && valm1.type=='1'"> <h5

Getting reference to child component in parent component [duplicate]

纵然是瞬间 提交于 2019-11-27 10:47:47
问题 This question already has an answer here: How can I select an element in a component template? 10 answers In Angular 2, I have a component that has a child component. However, I want to acquire a copy of that child component to use in the parent, to call its functions or whatever. I found out that I could use local variables, and that way I will be able to use the component in the template. However, I don't to only use it in the template, I want to use it in the actual code of the component.