Bind a Component variable to the styles directive in Angular

-1

I'm working on Angular 4 but I'm stuck. Let's say I have a CSS class called cover-art :

.cover-art {
width: 300px;
height: 300px;
background-color: rojo;
}

And then I want to update that class through entries in the HTML template. I do not want to directly modify <div class="cover-art"> but I want to change the values in the styles directive or overwrite that class.

I was thinking about creating a CSS class in the component definition class and linking it with @HostBinding or something like that, but I do not know ... Maybe it's not possible.

I do not want to use jQuery or another library, it does not make sense to do that.

    
asked by Miguel Barra 03.05.2017 в 07:27
source

1 answer

0

Good morning,

There are many ways to do that at Angular and it's really simple.

You have NgClass, which you can give a class that you previously defined in your style sheet.

  

link

You also have NgStyle, similar to the previous one but with online styles.

  

link

There are other ways but I think that for what you are looking for, these would be the most indicated.

PS: Even if you have to capture DOM elements, there's no reason to justify using jQuery , you can do it with TS, it's a tip:)

Another link for examples:

  

link

    
answered by 03.05.2017 в 15:29