angular-renderer2 | 易学教程

Apply a directive on a DOM element using getElementById in angular 7

阅读更多关于 Apply a directive on a DOM element using getElementById in angular 7

问题 I have some HTML generated by a third party (plotly), and I would love to apply a directive that we already have on one of the DOM elements it creates. The directive opens a colorPicker on click and sets colors to strings. I can reach the element with querySelector , or getElementById , but how can I transform / wrap it into angular can add a directive to? I tried: const el = document.getElementById('myEl'); const comp = new ElementRef(el) or: const comp = this.renderer.selectRootElement(el)

Angular Renderer2 setStyle only if specific class present on host

阅读更多关于 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 5 access divs list using @ViewChildren

阅读更多关于 Angular 5 access divs list using @ViewChildren

问题 I want to fetch all divs starting with the id 'div'. To do so, i use @ViewChildren but i'm not able to access the divs because i have an empty array , why ? My template <div id="div-1">Div 1</div> <div id="div-2">Div 2</div> <input type="button" (click)="getDivs()"> Component @ViewChildren('div') divs: QueryList<any>; divList : any[]; getDivs(){ this.divList = this.divs.filter(x => x.id.lastIndexOf('div-', 0) === 0); console.log(this.divList); // this.divList return an empty array but i

ngStyle VS Renderer2 ? What should I use?

阅读更多关于 ngStyle VS Renderer2 ? What should I use?

问题 I'm using Angular 5.2.9. I was wondering when should I use Renderer2 over ngStyle ? Which is the best solution ? 1: <div #div>FOO BAR</div> @ViewChild('div') div: ElementRef; constructor(private renderer: Renderer2) {} ngAfterViewInit() { this.renderer.setStyle(this.div.nativeElement, 'background', 'blue'); } 2: <div [ngStyle]="styleValue">FOO BAR</div> styleValue: any = {}; ngAfterViewInit() { this.styleValue = {background: 'blue'}; } I know that it is easier to use "ngStyle" in a ngFor, eg:

ngStyle VS Renderer2 ? What should I use?

阅读更多关于 ngStyle VS Renderer2 ? What should I use?

Angular 4 adding an image before each new line using renderer

阅读更多关于 Angular 4 adding an image before each new line using renderer

问题 I am trying to add an image before each new line So I am able to achieve this Apple Ball Cat Dog but I want to add image before in every new line (img) Apple (img) Ball (img) Cat (img) Dog The code this.tooltipTitle = "Apple,Ball,Cat,Dog,Elephant" create() { this.tooltip = this.renderer.createElement('div'); this.tooltipTitle.split(',').forEach((text) => { this.renderer.appendChild(this.tooltip, this.renderer.createText(text)); this.renderer.appendChild(this.tooltip, this.renderer

Appending HTML snippet to the view in Angular 6

阅读更多关于 Appending HTML snippet to the view in Angular 6

问题 I am getting a piece of html code from a http request to an external system , and I should show this on my view in my angular app to be percise this is the html snippet that I have to show (it will be a bit different by every request and response ) <div id='paysonContainer' url='https://test-www.payson.se/embedded/checkout?id=af1ebee5-40bd-410a-90d1-a94401553414'> </div> <script type='text/javascript' src='https://test-www.payson.se/embedded/Content/payson.js?v2'> </script> I used different

Appending HTML snippet to the view in Angular 6

阅读更多关于 Appending HTML snippet to the view in Angular 6

I am getting a piece of html code from a http request to an external system , and I should show this on my view in my angular app to be percise this is the html snippet that I have to show (it will be a bit different by every request and response ) <div id='paysonContainer' url='https://test-www.payson.se/embedded/checkout?id=af1ebee5-40bd-410a-90d1-a94401553414'> </div> <script type='text/javascript' src='https://test-www.payson.se/embedded/Content/payson.js?v2'> </script> I used different solution suggestions like innerHtml , but non of them is working for me (maybe because I have some