Angular 6 How to add multiple styles in directive? Style element not connected with directive (addClass)

Question

I have directive which does an action when I scroll.

@HostListener('window:scroll')
doSomething() {


    console.log(this.el);
    console.log(this.el.nativeElement);

    if (window.pageYOffset > 10) {
        console.log('mouse scroll blahblah');


        this.renderer.setStyle(this.el.nativeElement, 'height', '45px');



    } else {
        this.renderer.removeStyle(this.el.nativeElement, 'height');
    }

}

But I want to also add background color to this element AND other styling to element which is in another component. How to do it? Is it possible to add something like

this.renderer.setStyle([
     element1 [ 'height', '45px], ['background-color', 'red']
],
[
     element1, 'background-color', 'blue'
]

Or maybe I should use something totally different from 'setStyle'? I know that my example is messed up but I think there may be something alike, I mean... We are not suppouse to write

this.renderer.setStyle(this.el.nativeElement, 'height', '45px');
this.renderer.setStyle(this.el.nativeElement, 'background-color', 'red');

etc? Or maybe I shouldn't even try to do it and simply add a class as it's only proper way to add multiple styles? But how? document.getElementsByClassName('element2') add some class

Got it

Actually I'm not sure that there is one good way to do it. Even in bigger project I can't avoid mixing setting and removing single style with classes. So I wouldn't stick to only one of them. I would definitely not use only setStyle as Kevin suggested as it is terrible to remove later. Yeah, it lets you to adjust everything independently but you can do it simpler, most of the time you won't even need control specific style of element, if - then use class, remove it, if you need to remove single part do it by setStyle/removeStyle.

If you have small project then you can use whatever you want. If it's big... Well, most probably it won't be clean at some point anyway, so mix what works for you :P

const sth = document.getElementsByClassName('myElement');

    if (window.pageYOffset > 10) {

        this.renderer.addClass(sth[0], 'onScroll'); //for some reason there is array created, so you have to get there by adding [0]
        this.renderer.addClass(this.el.nativeElement, 'onScroll');

    } else {
        this.renderer.removeClass(this.el.nativeElement, 'onScroll');
        this.renderer.removeClass(sth[0], 'onScroll');
    }

I don't think that it's a "good practice" if I write setStyle() fifteen times (background, height, width, margin, padding...etc) to, lets say, twenty elements. It's good to know how to deal with that in bigger project — Aerogirl, Oct 23 '18 at 16:46
The array you get is because getElementsByClassName can return multiple elements (notice the 's'). For completness you can iterate on this array and add the class for all of them. — Kevin FONTAINE, Oct 24 '18 at 07:07

score 4 · Answer 1 · answered Oct 23 '18 at 16:04

4

Using addClass() and removeClass() is certainly the cleanest wax to do it, as you can simply tweak your result by adjusting the CSS later.

See Angular Renderer documentation for how to use it.

answered Oct 23 '18 at 16:04

Kevin FONTAINE

845
8
17

I've tried to let sth = document.getElementsByClassName('oldClass); and later in if - this.renderer.addClass('oldClass', 'onScroll'); but I get an error "Cannot read property 'add' of undefined" – Aerogirl Oct 23 '18 at 17:03
1

Don't forget to accept the answer by clicking on the check mark beside it if it solved your problem. :-) – Kevin FONTAINE Oct 24 '18 at 07:13

Angular 6 How to add multiple styles in directive? Style element not connected with directive (addClass)

1 Answers1