Como mostrar uma janela modal em angular, usando o w3.css como quadro?
tenho uma NgFor angular que está a criar uma lista de elementos, quero mostrar uma janela de detalhes modais sobre o elemento clicado, estou a usar o w3.css como quadro css, mas eu não sou bem sucedido
eu tentei usar o NgStyle com alguma entrada de pai para filho, eu demonstrado usando angular 4 dias atrás, então eu ainda não sou acostumado a lógica, nos registros do console vejo que meu mouse está disparando, mas eu não sei o que está acontecendo depois de
o meu código
lista Componente e Modelo
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { BreakPointService } from '../../providers/break-point.service';
import { ReactiveTwitterSpringService } from '../../reactive/reactive-twitter-spring.service';
import { ITweet } from '../../reactive/model/itweet';
import { Subscription, Subject } from 'rxjs';
@Component({
selector: 'app-tweet-list',
templateUrl: './tweet-list.component.html',
styleUrls: ['./tweet-list.component.css']
})
export class TweetListComponent implements OnInit {
list_div_class;
search_input_class;
selectedTweet: ITweet;
public search_results$ = new Subject<any>();
search_results: ITweet[] = new Array();
subscribe: Subscription = new Subscription();
constructor(private tweetService: ReactiveTwitterSpringService, private cdr: ChangeDetectorRef) { }
visible = 'none';
search(tag) {
this.search_results = new Array();
this.subscribe.unsubscribe();
this.subscribe = new Subscription();
this.search_results$ = new Subject<any>();
this.subscribe.add(this.tweetService.search(tag).subscribe(tweet => {
this.search_results.push(tweet);
this.search_results = this.search_results.slice();
this.cdr.detectChanges();
this.search_results$.next(this.search_results);
console.log(tweet);
}));
console.log('array contains ' + this.search_results);
}
setSelected(tweet) {
console.log('selecting and showing');
this.selectedTweet = tweet;
this.visible = 'block';
}
ngOnInit() {
BreakPointService.current_css.subscribe(value => {
console.log('value is ' + value);
this.setupCss(JSON.parse(value));
});
}
setupCss(value: any): any {
this.list_div_class = value.list_div_class;
this.search_input_class = value.search_input_class;
}
}
Modelo
<div class="{{list_div_class}}" style="max-height: 100vh;">
<input type="text" class="{{search_input_class}}" (keyup.enter)="search(searchInput.value)" #searchInput>
<ul class="w3-ul w3-hoverable" style="overflow-x:auto;max-height:70vh;">
<li class="w3-bar w3-center" *ngFor="let tweet of search_results " (click)="setSelected(tweet)">
<img src="{{tweet.userImage}}" class="w3-bar-item w3-circle" style="width:100px;">
<div class="w3-bar-item">
<span class="w3-large">{{tweet.id.name}}</span>
<br>
<span>#{{tweet.tag}}</span>
</div>
</li>
</ul>
<app-tweet-detail [detail]="selectedTweet" [visible]="visible"></app-tweet-detail>
</div>
o meu componente e modelo de detalhe
import { Component, OnInit, Input } from '@angular/core';
import { ITweet } from '../../../../reactive/model/itweet';
@Component({
selector: 'app-tweet-detail',
templateUrl: './tweet-detail.component.html',
styleUrls: ['./tweet-detail.component.css']
})
export class TweetDetailComponent implements OnInit {
@Input() detail: ITweet = new ITweet();
@Input() visible = 'none';
constructor() { }
setInvisible() {
console.log('hidding');
this.visible = 'none';
}
ngOnInit() {
}
}
Modelo
<div id="modal" class="w3-modal" [ngStyle]="{display: visible}">
<div class="w3-modal-content">
<div class="w3-container" *ngIf="detail">
<span (click)='setInvisible()' class="w3-button w3-display-topright">×</span>
<img src='{{detail.userImage}}' style='width: 250px;' />
<span class='w3-large'>{{detail.id.name}} {{detail.country}} {{detail.placeFullName}}</span>
<p>{{detail.id.text}}</p>
</div>
</div>
</div>
O que devo fazer?
NB:
no w3.tutorial css eles usam o elemento get por id para mudar a visibilidade para nenhum ou bloco.
1 answers
Acho que o que tens de fazer é ter duas variáveis a segurar o {[[2]} e um selectedItem
onde vais Mostrar no modal. então, por exemplo
Componente do ficheiro TS
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
listOfItems: any[];
selectedItem: any;
ngOnInit() {
this.listOfItems = [
{
title: 'Title 1',
content: 'this is my first item'
},
{
title: 'Title 2',
content: 'this is my second item'
}
];
}
openModal( item ) {
this.selectedItem = item;
}
closeModal() {
this.selectedItem = undefined;
}
}
Então temos {[4] } que atribui um item na variável selectedItem
para nós mostrar o item específico e deixar o modal mostrar, fechar o modal para revogar o valor e fazer o nosso modal esconder-se novamente. então, implementar isso no html se parece com isso.
Componente HTML
<button *ngFor="let item of listOfItems; let i = index" (click)="openModal(item)" class="w3-button">Open item #{{ i }}</button>
<div *ngIf="selectedItem" class="w3-modal" [style.display]="selectedItem ? 'block' : 'none'">
<div class="w3-modal-content">
<div class="w3-container">
<span (click)="closeModal()" class="w3-button w3-display-topright">×</span>
<h1>{{ selectedItem.title }}</h1>
<p>{{ selectedItem.content }}</p>
</div>
</div>
</div>
Então temos um botão que faz loops através da lista de itens e passa o item na função para que possamos selecionar qual item a ser mostrado. Em seguida, no modal tentamos verificar se selectedItem
está definido, então se sim, então o visor será visível e não de outra forma.