angular2 css style doesn't work for dynamicly created element?

Question

Issue: In angular2, note.component.css file doesn't work for dynamically created element within note.component.ts. Does anyone know the reason? Or is it the correct behaviour?

note.component.css can work for element already existed in note.component.html. If I put the css style in file "styles.css", it worked. If I set the style with DOM, it worked.

File structure:

app
    components
        note
            note.component.css
            note.component.html
            note.component.ts
index.html
styles.css

note.component.html:

<div id="section1"></div>

note.component.css:

button{
    background-color: green; //doesn't work
}

styles.css:

button{
    background-color: green; //worked
}

note.component.ts:

  ngOnInit() {
    var div = document.createElement("button"); 
    div.innerHTML = "Hello world";
    // div.style.backgroundColor = "green"; --- worked
    document.getElementById("section1").appendChild(div);
  }

The poor man's solution is to remove View Encapsulation. The proper way is to use *ngIf to create and destroy the desired div instead of using DOM manipulation in your component. — William B
– William B, Commented Mar 16, 2017 at 20:14
Actually, I’m creating a folder manage tool, like this. User can create/delete/expand/collapse any folder. That’s why I choose DOM and give up ngIf or ngFor. I want elements to be dynamically created under clicked folder. Do you have any better idea? — gary.zhang
– gary.zhang, Commented Mar 17, 2017 at 1:28

machinehead115 · Accepted Answer · 2017-03-16 20:22:03Z

4

This has to do with the ViewEncapsulation of the Component. By default it is set to Emulated which will wrap all of the Component's view into a separate 'scope'. There are two ways of fixing it:

1) Set the encapsulation to ViewEncapsulation.None

import { ViewEncapsulation } from '@angular/core';

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})

2) Prefix your css with :host /deep/

:host /deep/ button {
    background-color: green;
}

*EDIT and yes like William B said you shouldn't manipulate the DOM like this. Take a look at #2 here

edited Mar 16, 2017 at 20:22

answered Mar 16, 2017 at 20:11

machinehead115

1,65710 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

William B Over a year ago

it's worth noting that the semantic solution is not to continue creating Elements in your ngOnInit and just remove view encapsulation - these are anti patterns. Instead he should have the desired div in the template and simply create/destroy it with *ngIf

machinehead115 Over a year ago

Right, I should have specified the correct way to do it as well, but also wanted to give him a solution to what he was currently working with.

gary.zhang Over a year ago

Great thanks for your answers. I will try the two solutions.

gary.zhang Over a year ago

Actually, I’m creating a folder manage tool, like link. User can create/delete/expand/collapse any folder. That’s why I choose DOM and give up ngIf or ngFor. I want elements to be dynamically created under certain folder. Do you have any better idea?

Collectives™ on Stack Overflow

angular2 css style doesn't work for dynamicly created element?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related