My goal is to display modals with a modal-trigger without it automatically popping up during application initialization. However, every time I start my application, the modal pops up instantly. Below is the code snippet from my component .ts file:
import { Component, OnInit, OnChanges, EventEmitter } from '@angular/core';
import { Location } from '@angular/common';
import { CompetenceService } from './../../core/services/competence-data.service';
import { Competence } from './../../models/competence';
import { Observable } from 'rxjs/Observable';
import { MaterializeAction } from 'angular2-materialize';
@component({
selector: 'competence',
templateUrl: './template/competence.html'
})
export class competenceComponent implements OnInit {
competence: Competence;
competenceliste: Observable<Array<Competence>>;
constructor(private service: CompetenceService) { }
ngOnInit() {
this.competenceliste = this.service.GetFromCV();
}
modalActions = new EventEmitter<string | MaterializeAction>();
openModal() {
this.modalActions.emit({ action: "modal", params: ['open'] });
}
closeModal() {
this.modalActions.emit({ action: "modal", params: ['close'] });
}
public modifcompetence() {
this.service.Update(this.competence).subscribe();
this.competence = null;
this.competenceliste = this.service.GetFromCV();
}
delete(competence: Competence) {
if (confirm("Voulez-vous vraiment supprimer cette compétence ?")) {
this.service.Delete(competence).subscribe();
this.competence = null;
this.competenceliste = this.service.GetFromCV();
}
}
updateButton(competence: Competence) {
this.competence = competence;
}
}
And here's my corresponding HTML snippet:
<button class="btn-floating btn-small waves-effect waves-light grey btnmodif modal-trigger" (click)="openModal()">
<i class="material-icons">mode_edit</i>
</button>
<div *ngIf="competence">
<div id="modal1" class="modal" materialize="modal" [materializeParams]="[{dismissible: false}]" [materializeActions]="modalActions">
<div class="modal-content">
<h4>Modifier une compétence</h4>
<div class="input-field col s6">
<input type="text" class="form-control" id="modifcompetence"
required
[(ngModel)]="competence.name" name="modifcompetence">
<label class="active">Nom</label>
</div>
<div class="input-field col s6">
<input type="text" class="form-control" id="modifcompetence"
required
[(ngModel)]="competence.categorie" name="modifcompetence">
<label class="active">Catégorie</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="waves-effect waves-light btn grey">Annuler</button>
<button type="button" (click)="modifcompetence()" class="waves-effect waves-light
btn">Modifier</button>
</div>
</div>
The technologies I am using are:
- webpack
- jquery 2.2.4
- materializecss 0.98.2
- angular-materialize 15.0.8
- hummerjs 2.0.4