Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- TypeError: Cannot read property 'classList' of null
- import { Component, ViewEncapsulation, OnInit } from '@angular/core';
- @Component({
- encapsulation: ViewEncapsulation.Native,
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.scss']
- })
- export class AppComponent implements OnInit {
- title = 'scssTesting';
- constructor() { }
- step: string = 'step1';
- step1: any;
- step2: any;
- step3: any;
- ngOnInit() {
- }
- next() {
- this.step1 = document.getElementById('step1');
- this.step2 = document.getElementById('step2');
- this.step3 = document.getElementById('step3');
- if (this.step === 'step1') {
- this.step = 'step2';
- this.step1.classList.remove("is-active");
- this.step1.classList.add("is-complete");
- this.step2.classList.add("is-active");
- } else if (this.step === 'step2') {
- ....
- }
- }
- .progress {
- position: relative;
- display: flex;
- .........
- }
- <div class="container">
- <div class="progress">
- <div class="progress-track"></div>
- <div id="step1" class="progress-step">
- Step One
- </div>
- <div id="step2" class="progress-step">
- Step Two
- </div>
- <div id="step3" class="progress-step">
- Step Three
- </div>
- </div>
- <button (click)="next()">Next Step</button>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement