problem using different division according to condition required

Question

i am developing a chat application.

the problem in my app is i am not able to switch between (or use) different div according to condition

i want to make sure that if username matches with the username of the message.then outgoing message class division should be displayed else the incoming message class. here is my messageComponent.ts file

export class MessageComponent implements OnInit {
 @Input() chatMessage:MessageModel;
 ownMessage:boolean;
 userName:string;
 messageContent:string;

  constructor(public userService:UserServiceService) { }

  ngOnInit() {
  this.analyseMessage();
  }

  analyseMessage(){

    if(this.chatMessage.senderUsername == this.userService.username){
      console.log("username matches");  
      this.ownMessage=true;
    }else{
      console.log("username don't match!");
       this.ownMessage=false;
    }
  }

}

here is the code of html page

<div class="incoming_msg" *ngIf="!ownMessage" >
    <div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
    <div class="received_msg">
      <div class="received_withd_msg">
        <b>{{ chatMessage.senderUsername}}</b>
         &emsp;
        <p> {{ chatMessage.message }}</p>
    </div>
  </div>

  <div class="outgoing_msg" *ngIf="ownMessage">
    <div class="sent_msg">
      <p> {{ chatMessage.message }}</p>
  </div>

please help me with the problem and help me write the correct code.

Answer 1

You can implement by *ngIf="true" && *ngIf="false" condition

<div class="incoming_msg" *ngIf="chatMessage.senderUsername === userService.username" >
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="received_msg">
  <div class="received_withd_msg">
    <b>{{ chatMessage.senderUsername}}</b>
     &emsp;
    <p> {{ chatMessage.message }}</p>
 </div>
</div>

<div class="outgoing_msg" *ngIf="chatMessage.senderUsername !== userService.username">
<div class="sent_msg">
  <p> {{ chatMessage.message }}</p>
</div>

OR

*ngIf="show; else notShow" 2 nd way

<div class="incoming_msg" *ngIf="chatMessage.senderUsername === userService.username"; else sentMsg>
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="received_msg">
  <div class="received_withd_msg">
    <b>{{ chatMessage.senderUsername}}</b>
     &emsp;
    <p> {{ chatMessage.message }}</p>
 </div>
</div>

<div class="outgoing_msg" #sentMsg>
<div class="sent_msg">
  <p> {{ chatMessage.message }}</p>
</div>