Modify a component using Renderer and ElementRef

Question

1 ISSUE

---

I am trying to implement the following:

I have a container component ContainerComponentand child components ChildComponent. I want to change the rendering and general behavior of child components with ContainerComponent.

---

2 USED TECHNOLOGIES

---

Angular2, HTML, CSS, Javascript, Typescript,ES6

---

3 CODE

---

ContainerComponent.ts

export class ContainerComponent {

    children: Array<Child>;

    constructor(
        private _el: ElementRef,
        private _dcl: DynamicComponentLoader,
        private _childService: ChildService) {

    }

    ngOnInit() {

        let index = 0; // index of child component in container
        this._childService.getChildren().then( // get the children models
            (children) => {

                this.children = children; 
                this.children.forEach((child, index) => {
                    this._dcl.loadIntoLocation(ChildComponent, this._el, 'dynamicChild')
                    .then(function(el){
                        el.instance.child = child; // assign child model to child component
                        el.instance.index = index;
                    });
                });

            }
        );

    }

}

ChildComponent.ts

export class ChildComponent {

    child: Child;
    index: number;

    constructor(private _renderer: Renderer, private _el: ElementRef) {
    }

    ngOnInit() {

        let delay = (this.index + 1) * 0.5; // calculate animation delay
        this._renderer.setElementStyle(this._el, '-webkit-animation-delay', delay +  !important');
        this._renderer.setElementStyle(this._el, 'animation-delay', delay +  !important');

    }

}

---

4 EXPLANATION OF CODE

---

In the above code, ContainerComponentdynamically inserts ChildComponent(provided, this can be done without DynamicContentLoader).

ChildComponentsshould dynamically add css properties, in this case, the delay of the animation after it is displayed. Therefore, based on the index of the child, the delay in the animation increases.

, css .

Answer 1

. , , -webkit-animation-delay animation-delay.

, color, .

ngOnInit() {
    this._renderer.setElementStyle(this._el, 'color', 'yellow');
}

, ... , :

• CSS3 javascript?
• http://www.javascriptkit.com/javatutors/setcss3properties.shtml

, Angular2, ... : https://github.com/angular/angular/blob/master/modules/angular2/src/animate/animation.ts.

, , Thierry

Answer 2

, angular2. !important . plain js - , , .

:

this._renderer.setElementStyle(this._el, 'animation-delay', delay + 's'); //sans !important

!important, :

this._el.nativeElement.style.setProperty('animation-delay', delay + 's', 'important');

-webkit- ( ),

Answer 3

:

https://angular.io/docs/ts/latest/api/core/ElementRef-class.html

ElementRef . Angular 2 , dom. , , :

import {NgStyle} from 'angular2/common';
import {Component} from "angular2/core";

@Component({
    selector: 'app',
    template: `
        <div *ngFor="#child of children; #i = index">
            <div [ngStyle]="{ 'z-index': i * multiplier,
                                '-webkit-animation-delay': i * multiplier + 's',
                                 'animation-delay': i * multiplier + 's' }"> {{i}} - {{child}} </div>
        </div>
    `,
    directives: [NgStyle]
})
export class AppComponent{
    public children:string[] = [ "Larry", "Moe", "Curly" ];
    public multiplier:number = 2;
}

css , z-index, , , css , ngFor .

, !