Angular2 ngIf breaks element styles

Question

I have a MDL stepper element in my angular2 app. I have this element inside a div. If I apply *ngIf and a condition to that div, the stepper component is absolutely broken. Without *ngIf it renders perfect.

<!-- stepper in context -->
<div align="center">
    <ul class="mdl-stepper mdl-stepper--horizontal" id="demo-stepper-nonlinear">
        <li class="mdl-step">
            <span class="mdl-step__label">
                <span class="mdl-step__title">
                    <span class="mdl-step__title-text">Checkboxes</span>
                    <span class="mdl-step__title-message">Few quick questions</span>
                </span> 
            </span>
            <div class="mdl-step__content">

            </div>
            <div class="mdl-step__actions">

            </div>
        </li>
       </ul>
       </div>

Why is it so?

Without ngIf

With ngIf

UPDATE:

<div align="center" *ngIf="stepper">
    <ul class="mdl-stepper mdl-stepper--horizontal" id="demo-stepper-nonlinear">
        <li class="mdl-step">
...
   </li>
 </ul>
</div>

Component:

export class HomeComponent implements OnInit {

    stepper: boolean;
    constructor(){}
    showContext(){
        this.stepper=true; <= To make the div visible
        ...
    }

In my angular-cli.json:

"styles": [
        "styles.css",
        "../node_modules/material-design-lite/dist/material.amber-deep_orange.min.css",
        "../node_modules/mdl-stepper/stepper.css"
      ],
      "scripts": [
        "../node_modules/material-design-lite/material.min.js",
        "../node_modules/mdl-stepper/stepper.min.js"
      ],

can you show what the code looks like with *ngIf and what is the condition? — Suraj Rao, Feb 21 '17 at 10:59
You probable need to run `upgradeDom()` again after the `*ngIf` expression becomes truthy and adds the elements to the DOM. http://stackoverflow.com/questions/34421919/integrating-material-design-lite-with-angular2 — Günter Zöchbauer, Feb 21 '17 at 11:12
@GünterZöchbauer But in Angular2 cli final version, we do not add directives at each components, right? To use default MDL components I didn't do anything except adding styles and scripts in angular-cli.json and they render correct. However mdl-stepper is not directly provided in MDL, I had to separately install it. — Thinker, Feb 21 '17 at 11:17
https://github.com/ahlechandre/mdl-stepper/blob/master/README.md#dynamically-adding-a-stepper — Suraj Rao, Feb 21 '17 at 11:18
Try @GünterZöchbauer answer. you need to upgrade the stepper `componentHandler.upgradeElement(stepperElement);` or `componentHandler.upgradeAllRegistered();` — Suraj Rao, Feb 21 '17 at 11:20

Günter Zöchbauer · Accepted Answer · 2017-02-21T11:23:59.257

1

I think you need something like

<ul #stepper class="mdl-stepper mdl-stepper--hor

@ViewChild('stepper') stepper:ElementRef;

constructor(private elRef:ElementRef, private cdRef:ChangeDetectorRef) {}

showContext(){
    this.stepper=true; <= To make the div visible
    this.cdRef.detectChanges();
    componentHandler.upgradeElement(elRef.nativeElement);
    // or
    componentHandler.upgradeElement(stepper.nativeElement);        
    ...
}

edited Feb 21 '17 at 11:23

answered Feb 21 '17 at 11:17

Günter Zöchbauer

623,577
216
2,003
1,567

Okay I just tried this, but it did nothing actually. Do I need something else than nativeElement? – Thinker Feb 21 '17 at 11:21
I updated my answer. Perhaps you need to apply `upgradeElement()` to the exact element. I don't know MDL. You can also try `upgradeDom()` as mentioned in the other answer I linked to in a comment. – Günter Zöchbauer Feb 21 '17 at 11:25

Angular2 ngIf breaks element styles

1 Answers1