angular-directive

问题 I'm trying to simulate tab key press when enter is pressed on input control.For that I use a directive: private el: ElementRef; @Input() onEnter: string; constructor(private _el: ElementRef, public renderer: Renderer) { this.el = this._el; } @HostListener('keydown', ['$event']) onKeyDown(e: any) { if ((e.which === 13 || e.keyCode === 13)) { e.preventDefault(); const event = new KeyboardEvent("keypress", { "key": "Tab" }); this.el.nativeElement.dispatchEvent(event); ............ code for enter

问题 How can I add the mat-ripple directive to the host element of a custom directive I've created? The point is to have mat-ripple automagically added to any element I add my-custom-directive too. So if I add <button my-custom-directive>Button</button> to the template it should be rendered as <button my-custom-directive mat-ripple mat-ripple-color="#000">Button</button> without having to type all of that out every time I use my-custom-directive . As an example look at how mat-raised-button works.

问题 I am appending the component with dynamic element i create. it appending correctly. but the dynamic element is not resizing to component dimensions. as a general it's not aware of it's child. any one help me to fix this issue? here in the image, the red bordered element one is I am creating. but the width is not extended with component underneath. source code on browser: my directive: import { DOCUMENT } from "@angular/common"; import { Directive, ElementRef, EventEmitter, HostListener,

问题 I am appending the component with dynamic element i create. it appending correctly. but the dynamic element is not resizing to component dimensions. as a general it's not aware of it's child. any one help me to fix this issue? here in the image, the red bordered element one is I am creating. but the width is not extended with component underneath. source code on browser: my directive: import { DOCUMENT } from "@angular/common"; import { Directive, ElementRef, EventEmitter, HostListener,

问题 I'm trying to create a custom directive for an input field (textbox) such that it accepts only numbers and not alphabetical characters. I have the following (only-numbers.directive.ts) file : import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: "[onlyNumbers]" }) export class OnlyNumbersDirective { constructor(private el: ElementRef) {} @HostListener('keydown', ['$event']) onKeyDown(e: KeyboardEvent) { if ( // Allow: Delete, Backspace, Tab, Escape, Enter

问题 I have attempted to use HostListener to track the scroll position to change colour of the my header. My header component is as follows, import { Component, OnInit, Input, HostListener, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.scss'] }) export class HeaderComponent implements OnInit { constructor(@Inject(DOCUMENT) private document: Document) { }

问题 I've been reading the documentation but still seem to be confused on when you should use a directive or a component... Also, when is it best to abstract components and place them into modules?? 回答1: In fact, a component is also a type of directive according to the angular docs. There are three kinds of directives in Angular: 1. Components—directives with a template. 2. Structural directives—change the DOM layout by adding and removing DOM elements. 3. Attribute directives—change the

来源： https://stackoverflow.com/questions/64807930/angular-styling-viewcontainerref-from-directive-input-array

来源： https://stackoverflow.com/questions/64807930/angular-styling-viewcontainerref-from-directive-input-array

来源： https://stackoverflow.com/questions/63163118/can-we-use-a-ngmodel-directive-with-an-object-property