Skip to main content
1 de 3

Como podria identificar el modal para poder cargarlo al arranque del componente en Angular2?

El problema que tengo es el siguiente:

Tengo una aplicacion de prueva para aprender Angular 2, en este tengo un Modal que se muestra a partir de un botoncioto. Ahora viene la pregunta.

Se puede mostrar el modal sin necessidad de boton, lo digo porque como parametro me pide un content que se lo passo a trabes del codigo html...

import { Component, OnInit, NgZone }    from '@angular/core';
import { Router }                       from '@angular/router';

//import '../rxjs-operators';

import { NgbModal, ModalDismissReasons }from '@ng-bootstrap/ng-bootstrap';

import { WhatsGPIService }              from '../services/WhatsGPI.service';
import { WhatsGPISignalService }        from    '../services/WhatsGPI.signal.service';
import { Message }                      from '../models/Message';

@Component({
    selector: 'my-app',
    templateUrl: '/app/templates/messages.html',
    styleUrls: ['../css/WhatsGPI.css']
})

export class AppComponent implements OnInit {

    title = 'WhatsGPI';

    closeResult:string = '';

    usuariLogejat:string = '';
    isLogged:boolean = false;

errorMessage: string;
Missatges: Message[];
signalService: WhatsGPISignalService;
public currentMessage: Message;
public allMessages: Message[];
public canSendMessage: Boolean;


constructor(
    private whatsGPIService: WhatsGPIService,
    private _signalRService: WhatsGPISignalService,
    private _ngZone: NgZone,
    private modalService: NgbModal)
{
    this.subscribeToEvents();
    this.canSendMessage = _signalRService.connectionExists;
    this.currentMessage = new Message();
    this.allMessages = new Array<Message>();
}

ngOnInit() {
    this.getMessages();
    //this.signalService = new WhatsGPISignalService();
}

open(content:any) {
    this.modalService.open(content).result.then(
    (result) => { 
        this.usuariLogejat = result;
        console.log(this.usuariLogejat);

        if(!(this.usuariLogejat === '')){
            this.isLogged = true;
        }else{
            this.isLogged = false;
        }
    }, 
    (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; 
                console.log(this.closeResult)});
}

private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
        return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
        return 'by clicking on a backdrop';
    } else {
        return  `with: ${reason}`;
    }
}

getMessages(): void {
    this.whatsGPIService.getMessages()
        .then(messages => {
            this.Missatges = messages
        });
}

addMessage(missatge: string): void {
    if (!this.usuariLogejat) { return; }
    this.whatsGPIService.addMessage(this.usuariLogejat, missatge)
        .then(message => {
            //this.Missatges.push(message);
            this.Missatges.push(message);
            this.getMessages();
        })
        .catch(error => this.errorMessage = <any>error);
} 

private subscribeToEvents(): void {
    console.log("Component, subscribeToEvents")

    this._signalRService.connectionEstablished.subscribe(() => {
        this.canSendMessage = true;
    });

    this._signalRService.messageReceived.subscribe((message: Message) => {
        this._ngZone.run(() => {
            console.log(message);
            this.currentMessage = new Message();
            this.Missatges.push(message);
        });
    });
}

}

i la plantilla html es la siguiente:

<div class="container">

<div class="row m-b-1 p-a-1">
    <div class="col-md-5">
        <h1 class="m-b-1 col-md-4 offset-md-2"><b>{{title}}</b></h1>
    </div>
    <div class="col-md-4">
        <h3>{{usuariLogejat}}</h3>
    </div>
    <div class="col-md-3">
        <button class="btn btn-lg btn-outline-primary" (click)="open(content)">Log In</button>
    </div>
</div>

<div class="row">
    <div class="col-md-8 offset-md-2">

        <div id="contenidorMissatges" class="p-a-1">
            <div *ngFor="let message of Missatges" class="boxMissatge p-l-1">
                <span>{{message.nom}}</span><br />
                <span class="missatge">{{message.missatge}} </span>
            </div>
        </div>

        <div *ngIf="isLogged" class="p-a-1 m-b-1">

            <hr />

            <div class="row enviaMissatge">
                <div class="col-md-2">
                    <label>Missatge:</label>
                </div>
                <div class="col-md-8">
                    <input #nouMissatge class="form-control" />
                </div>
                <div class="col-md-2">
                    <button (click)="addMessage(nouMissatge.value); nouMissatge.value=''">
                        Enviar
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>

<template ngbModalContainer #content let-c="close" let-d="dismiss">
    <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Entra al chat!!  -  WhatsGPI</h4>
    </div>
    <div class="modal-body">
        <p>Benvinguts al chat de GPI</p>
        <hr />
        <label>Nom d'Usuari:</label>
        <input #usuari type="text" class="form-control" placeholder="ex: Jordi" />
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="c(usuari.value)">Acceptar</button>
    </div>
</template>

</div>