Angular Renderer2 setStyle only if specific class present on host
来源： https://stackoverflow.com/questions/51909916/angular-renderer2-setstyle-only-if-specific-class-present-on-host
angular-directive
Cannot read property 'viewContainerRef' of undefined
问题 I am trying to display a dynamic component similar (not exact) to the example in angular docs. I have a dynamic directive with viewContainerRef @Directive({ selector: '[dynamicComponent]' }) export class DynamicComponentDirective { constructor(public viewContainerRef: ViewContainerRef) { } } Excerpt from component code @ViewChild(DynamicComponentDirective) adHost: DynamicComponentDirective; .. ngAfterViewInit() { let componentFactory = null; console.log(component); componentFactory = this
Angular - adding Cypress data-cy attribute
问题 I just yesterday started using cypress.io with angular, as the docs say, I'm using the attribute data-cy to specifically target elements <div data-cy="myelement">Hello</div> cy.get("[data-cy]=myelement") The problem is that angular doesn't recognize the data-cy attribute if I want to bind it dinamically <div *ngIf="user$ | async as user" [data-cy]="user.name">Online</div> Do I have to create a personal directive to add that attribute dinamically? Or there is a better way ? 回答1: Angular treats
Angular - adding Cypress data-cy attribute
问题 I just yesterday started using cypress.io with angular, as the docs say, I'm using the attribute data-cy to specifically target elements <div data-cy="myelement">Hello</div> cy.get("[data-cy]=myelement") The problem is that angular doesn't recognize the data-cy attribute if I want to bind it dinamically <div *ngIf="user$ | async as user" [data-cy]="user.name">Online</div> Do I have to create a personal directive to add that attribute dinamically? Or there is a better way ? 回答1: Angular treats
Angular - Check if all options are selected to enable button
问题 This is a quiz app, in this scenario my next button will redirect to another page and it's disabled by default . If I choose all the options it should enable . NOTE: My functionality of selecting options and choosing correct/wrong is working fine, I just can't figure out how to enable when each single option is selected. Any help or suggestions? Working demo: https://stackblitz.com/edit/angular-ivy-5qtyxy buttonDisabled = true; <button class="btn-next" [disabled]="buttonDisabled"> Next <
How to render a content inside directive at various places
问题 I want a component directive to render anything put inside it's selector to be rendered at specific sections inside its html. header, footer, main in this case. any.html <any-selector> <div>content to place</div> </any-selector> Expecting it to render following any-selector.html <header><div>content to place</div></header> <main><div>content to place</div></main> <footer><div>content to place</div></footer> tried it with ng-content but it rendered only at first occurrence of <ng-content> If
Unable to use element directive correctly
问题 I am trying to add a dynamic template and compile it within a directive. But when I use the directive to add dynamically it does not show the compiled version of the template I have. What is going wrong. It is a small error which I am unable to catch. Here is the plunker: http://plnkr.co/edit/0BalxNnQYVxEd3mAjexx UPDATE: Changes in the directive string in add() function <!DOCTYPE html> <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min
Directives not working with FormControl after upgrading to Angular 9
问题 I have used directives for enabling and disabling forms. This is in a separate typescript file. Code is given below: - import { NgControl } from '@angular/forms'; import { Directive, Input } from '@angular/core'; @Directive({ selector: '[disableControl]' }) export class DisableControlDirective { @Input('disableControl') set disableControl( condition : boolean ) { const action = condition ? 'disable' : 'enable'; this.ngControl.control[action](); } constructor (private ngControl : NgControl){}
Is it possible to unit test a structural directive the way we test an attribute directive in angular 2
问题 I have both attribute and structural directives in my project. I am able to test the attribute directive by creating a test component and using the attribute directive in it's template. @Component({ template: `<input [myAttrDir]="{prop1: val1, prop2: val2}"/>` }) export class TestComponent { } @Directive({ selector: '[myAttrDir]' }) export class MyAttrDirective { @Input('myAttrDir') testProp; } The testing module looks like: TestBed.configureTestingModule({ declarations: [MyAttrDirective,
Is it possible to unit test a structural directive the way we test an attribute directive in angular 2
问题 I have both attribute and structural directives in my project. I am able to test the attribute directive by creating a test component and using the attribute directive in it's template. @Component({ template: `<input [myAttrDir]="{prop1: val1, prop2: val2}"/>` }) export class TestComponent { } @Directive({ selector: '[myAttrDir]' }) export class MyAttrDirective { @Input('myAttrDir') testProp; } The testing module looks like: TestBed.configureTestingModule({ declarations: [MyAttrDirective,