Why I'm not able to display the success message in my simple CRM angular web application?

Question

In my Basic Angular app, I'm not able to display success message after writing the right code.

1)app.component.html

<h1 class="c1">{{title}}</h1>
<div *ngIf="success_msg;" style="background-color:aquamarine;">

User added successfully

</div>
<router-outlet></router-outlet>

2. app.component.ts

   import { Component } from '@angular/core';
   
   @Component({
      selector: 'app-root',
      template: '<h1>{{title}}</h1>',
      styleUrls: ['./app.component.scss']
   })
   export class AppComponent {
          title = 'Simple_CRM_App';
          success_msg = true;
         }
   

3. Output File

Angular App

Answer 1

Issue is with template Currently you have added the template within your component, so whatever you will add inside the app.component.html it doesn't work,

Now you have to either you can use templateUrl instead of template like this

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
})
export class AppComponent {
   title = 'Simple_CRM_App';
   success_msg = true;
}

or If you wish to use only template then update your template like this

@Component({
  selector: 'my-app',
  template: `
              <h1 class="c1">{{title}}</h1>
              <div *ngIf="success_msg" style="background-color:aquamarine;">
                User added successfully
              </div>
            `,
  styleUrls: ['./app.component.css']
})