[Angular 5] Chargement du premier click hostlistener

Version imprimable

Bonjour,

voici un script qui me pose problème:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div id="miniMenu">
    <ul id="modePortable">
            <li (click)="upToMenu()" >
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </li>
        <li [appModal]="modal" (click)="modal='contact'">
            tel
        </li>
        <li>croquefarmer.fr</li>
        <li [appModal]="modal"  (click)="modal='lieu'">
            map
        </li>
    </ul>
 
    <ul id="modeEcran">
    <li>contact</li>
        <li>0478787878</li>
    </ul>
 
</div>

le but est de récupérer quel lien j'ai cliqué soit contact soit lieu, mon problème est que au premier click le composant m'indique indefined,
par contre 2 ème clique, il sait où on a cliqué , voici mon component:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
import { Directive,ElementRef,HostListener,Input } from '@angular/core';
 
 
@Directive({
  selector: '[appModal]'
})
 
 
 
export class ModalDirective {
 
  @Input('appModal') modal;
 
  @HostListener('click') onClick() {
    console.log(this.modal); // au premier click, il me dit indefinded
   }
 
 
  constructor(private el: ElementRef) { }
 
}

Comment dois-je faire correctement la récupération du bon click ?pourquoi j'ai ce comportement ?
si vous avez une idée, merci d'avance de vos réponse :)

Je suis partie sur une autre solution car apparemment il y a un délais d'un événement,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div id="miniMenu">
    <ul id="modePortable">
        <li (click)="upToMenu()">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </li>
        <li [appModal]="modal" (click)="modal='contact'">
            tel
            <div class="boxModal">
                <div class="closeModal" (click)="modal='close'" >X</div>
                contact
            </div>
        </li>
        <li>croquefarmer.fr</li>
        <li [appModal]="modal" (click)="modal='lieu'">
            map
            <div class="boxModal">
                map ...
            </div>
        </li>
    </ul>
 
    <ul id="modeEcran">
        <li>contact</li>
        <li>0478787878</li>
    </ul>
 
    <style>
    .boxModal{
        display:none;
        background:yellow;
    }
    </style>

le componement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { Directive,ElementRef,HostListener,Input,Renderer } from '@angular/core';
 
 
@Directive({
  selector: '[appModal]'
})
 
export class ModalDirective {
 
  @Input('appModal') choix:string;
 
  @HostListener('click') onClick() {
    let part = this.el.nativeElement.querySelector('.boxModal') ;
    if(this.choix == 'close'){
 
      this.renderer.setElementStyle(part, 'display', 'none');
      console.log("fermer le modal");
    }else{
    this.renderer.setElementStyle(part, 'display', 'block');
}
   }
 
  constructor(private el: ElementRef, private renderer: Renderer) { }
 
}

30/11/2017, 15h20
pterrat

Tu n'utilises pas une modal Material?
Tu utilises une modal custom?
30/11/2017, 22h07
keokaz

Merci de ta réponse, je ne connais pas métarial, je vais me renseigner sur cette vidéo
https://medium.com/codingthesmartway...s-1ed0c2405f18

Je souhait quelque chose de simple à utiliser, je ne sais pas si cela vaut le coup pour cacher 2 fenêtres avec du css