How to dynamically set the data in Nebular User Angular component

Question

I am using the Nebular-User Angular UI component and its working, but I want to set the name property dynamically.

 <nb-user size="large"
             name="John Doe"
             title="Engineer"
             badgeText="99+"
             badgeStatus="success"
             badgePosition="bottom right">
 </nb-user>

How to set the name="John Doe" dynamically.

Answer 1

You could bind the property to a variable in the controller. Try the following

Controller

export class AppComponent {
  name = "John Doe";

  constructor() {
    setTimeout(() => { this.name = "Michael Wolfgang" }, 3000);   // <-- change `name` after 3 sec
  }
}

Template

<nb-user 
  size="large"
  [name]="name"    <!-- bind here to the `name` variable from controller -->
  title="Engineer"
  badgeText="99+"
  badgeStatus="success"
  badgePosition="bottom right">
</nb-user>

Working example: Stackblitz