I am facing an issue where the modal does not open when the component loads, and I cannot figure out why. Any assistance would be greatly appreciated.
component.html:
<div id="modal" class="modal modal-fixed-footer" materialize="modal" [materializeActions]="actions">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
</div>
</div>
component.ts:
import { Component, OnInit, EventEmitter, AfterViewInit } from '@angular/core';
import { QuizService } from '../services/quiz.service';
import { Answer, Question, Quiz } from '../models/index';
import {MaterializeAction, MaterializeDirective, MaterializeModule} from "angular2-materialize";
import "materialize-css";
@Component({
selector: 'app-quiz',
templateUrl: './quiz.component.html',
styleUrls: ['./quiz.component.sass'],
providers: [QuizService]
})
export class QuizComponent implements OnInit, AfterViewInit {
actions = new EventEmitter<string|MaterializeAction>();
quiz: Quiz = new Quiz(null);
pager = {
index: 0,
size: 1,
count: 1
};
selections: [string]
constructor(private quizService: QuizService) { }
ngOnInit() {
}
ngAfterViewInit() {
this.openModal()
}
openModal() {
this.actions.emit({action:"modal",params:['open']});
}
}
I have searched extensively online to identify what I might be missing. Any guidance or insight on this matter would be highly appreciated.