Add style to angular div

Question

I have not worked with Angular 2, but I know css and jquery.

I can't understand this syntax inside component

@Component({
    selector: 'sites-stats',
    styleUrls: ['./sites.stats.navbar.component.scss'],
    template: `
<div [sticky]="{'zIndex': 99}">

</div>
`
})

I mean <div [sticky]="{'zIndex': 99}"> With this way my div has position: fixed;z-index:99

What should I search to understand this style syntax inside component?

BTW I need to add top to this div, I tried <div [sticky]="{'zIndex': 99,'top':'2rem'}"> but it didn't work

If you need to add a static value (i.e. 2rem which isn't going to change), why not just style it with CSS like you normally would? — user184994
– user184994, Commented Jul 29, 2018 at 8:49
@לבנימלכה thank for response but can you mention how this syntax is named so I can search it in google? — Almas Abdrazak
– Almas Abdrazak, Commented Jul 29, 2018 at 8:53
About your question, [sticky]="what ever" is pass value to child with input binding angular.io/guide/…, the component sure use this variable to style some div of the component — Eliseo
– Eliseo, Commented Jul 29, 2018 at 8:57

לבני מלכה · Accepted Answer · 2018-07-29 08:57:17Z

2

You have to do it as below:

[style]="{'z-index': '99','top':'2rem'}"

This calls style-binding.

Learn here:https://coursetro.com/posts/code/24/Angular-2-Class-&-Style-Binding-Tutorial

And here:https://alligator.io/angular/style-binding-ngstyle-angular/

answered Jul 29, 2018 at 8:57

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

Add style to angular div

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related