Angular Chatbot

angular-bot.module.ts 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { CommonModule } from '@angular/common'; 
import { ChatComponent } from './chat/chat.component'; 
import { ChatService } from './chat.service'; 
@NgModule({ 
  imports: [CommonModule, FormsModule], 
  declarations: [ChatComponent], 
  providers: [ChatService], 
}) 
export class AngularBotModule {} 

chat.component.css

.message { 
    border-radius: 50px; 
    margin: 0 15px 20px; 
    padding: 10px 20px; 
    position: relative; 
    font-size: 20px; 
  } 
  .message.to { 
    background-color: #2095FE; 
    color: #fff; 
    margin-left: 100px; 
    text-align: right; 
  } 
  .message.from { 
    background-color: #E5E4E9; 
    color: #363636; 
    margin-right: 100px; 
  } 
  .message.to + .message.to, 
  .message.from + .message.from { 
    margin-top: -10px; 
} 

chat.component.html

<ng-container *ngFor="let message of messages"> 
  <div class="message" [ngClass]="{from: message.author === 'bot',to: message.author === 'user'}"> 
    {{ message.content }} 
  </div> 
</ng-container> 
<label *ngIf="messages.length == 0; else dialogInfo" for="nameField">Chat Bot</label> 
<input [(ngModel)]="value" (keyup.enter)="sendMessage()" type="text" /> 
<button (click)="sendMessage()">Send</button> 
<ng-template #dialogInfo> 
  <span [className]="'float-right'">Total messages: {{ messages.length }}</span> 
</ng-template> 

chat.component.ts

import { Component, OnInit } from '@angular/core'; 
import {Message,ChatService} from '../chat.service' 
@Component({ 
  selector: 'app-chat', 
  templateUrl: './chat.component.html', 
  styleUrls: ['./chat.component.css'] 
}) 
export class ChatComponent implements OnInit { 
  messages: Message[] = []; 
  value: string; 
  constructor(public chatService: ChatService) { } 
  ngOnInit() { 
      this.chatService.conversation.subscribe((val) => { 
      this.messages = this.messages.concat(val); 
    }); 
  }
  sendMessage() { 
    this.chatService.getBotAnswer(this.value); 
    this.value = ''; 
  } 
} 

Added all above codes, run the applications using ng serve –open OR npm start command and the application window will open like the below image.

Next going to enter the text “Hi”, we already mapped text “Hi” for replying with “Hello”. Once you enter “Hi” the service will check the related words and will get the acknowledgment. We set the replied time duration here to 2 seconds in the interval time.

Next going to enter messages like “Who are you” and the replied message we mapped “My name is Test Sat Bot” message will show and the Total messages count increased parallelly.

If we enter invalid text or unmapped text we will show default messages like “I can't understand your text. Can you please repeat”.

In this case, we map the text string of the application or else load the data in a JSON file and refer to the applications. Another way to get the JSON file from the backend is to call the API service and get the JSON file data to import in case we need it dynamically. something any values changes or text changes so directly change from backend and update the application simply. Avoid angular deployment or frontend changes at times and reduce workload.

I hope this article is most helpful for you.