Take a look at the output image . In the code below, I am displaying the contents of the messages array. How can I achieve the same functionality with a text box and button in an Angular environment?
<mat-card class="example-card">
<mat-card-header>
<img mat-card-avatar src="https://cdn2.iconfinder.com/data/icons/chatbot-line/100/chatbot-07-512.png">
<mat-card-title>Chat-Bot</mat-card-title>
<mat-card-subtitle>IMB</mat-card-subtitle>
</mat-card-header>
<mat-divider></mat-divider>
<div *ngFor="let i of messages">
{{i}}
</div>
<mat-form-field class="Message">
<input matInput placeholder="Enter your Message">
</mat-form-field>
<button mat-fab>
<mat-icon suffix>send</mat-icon>
</button>
</mat-card>import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'projectCB';
messages=['Hi Bhanu','Hi War'];
}