Skip to main content
Correcciones ortográficas
Origen Enlace
Mariano
  • 24.5k
  • 20
  • 76
  • 105

Como Cómo podría identificar el modal para poder cargarlo al arranque del componente en Angular2?

El problema que tengo es el siguiente:

Tengo una aplicación de prueba para aprender Angular 2en Angular 2, en este tengo un Modal que se muestra a partir de un botón. Ahora viene la pregunta.

Se¿Se puede mostrar el modal sin necesidad de botónbotón', lo digo porque como parámetro me pide un content, que se lo paso a través del código html...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);
        });
    });
}

}

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);
        });
    });
}
}

y la plantilla htmlhtml 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>
<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>

Como podría identificar el modal para poder cargarlo al arranque del componente en Angular2?

El problema que tengo es el siguiente:

Tengo una aplicación de prueba para aprender Angular 2, en este tengo un Modal que se muestra a partir de un botón. Ahora viene la pregunta.

Se puede mostrar el modal sin necesidad de botón, lo digo porque como parámetro me pide un content que se lo paso a través del código 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);
        });
    });
}

}

y 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>

Cómo podría identificar el modal para poder cargarlo al arranque del componente en Angular2?

Tengo una aplicación de prueba en Angular 2, en este tengo un Modal que se muestra a partir de un botón.

¿Se puede mostrar el modal sin necesidad de botón', lo digo porque como parámetro me pide un content, que se lo paso a través del código 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);
        });
    });
}
}

y 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>

Como podriapodría identificar el modal para poder cargarlo al arranque del componente en Angular2?

Tengo una aplicacionaplicación de pruevaprueba para aprender Angular 2Angular 2, en este tengo un Modal que se muestra a partir de un botonciotobotón. Ahora viene la pregunta.

Se puede mostrar el modal sin necessidadnecesidad de botonbotón, lo digo porque como parametroparámetro me pide un contentcontent que se lo passopaso a trabestravés del codigo htmlcódigo html...

iy la plantilla htmlhtml es la siguiente:

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

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...

i la plantilla html es la siguiente:

Como podría identificar el modal para poder cargarlo al arranque del componente en Angular2?

Tengo una aplicación de prueba para aprender Angular 2, en este tengo un Modal que se muestra a partir de un botón. Ahora viene la pregunta.

Se puede mostrar el modal sin necesidad de botón, lo digo porque como parámetro me pide un content que se lo paso a través del código html...

y la plantilla html es la siguiente:

Origen Enlace

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>