How to get data into html in angular

user_14511515 0
Viewed 388

I am trying to use angular to send data from parent to child component. In my parent component I use a onclick event to send data to my child component.

In my child component user-profile.ts i have this:

@Input('user')
  set user(user: any) {
  
  }

I know that the component recieved the data because if i console.log(user) it shows the data. However it doesnt see the data in the html. In the html of this file i have this

<h1>
  {{ user.name }}
</h1>

But i then get the error: "Cannot read property 'name' of undefined". What logic do i put into my .ts file to fix this?

angular javascript
5 Answers

Use below in your user-profile.ts

@Input() user: any; // or use your User type

and in your child component html file you can keep your change. To avoid undefined errors you can use. In your html.

{{user?.name}}
user_78720910

You haven't written the get statement

private _user; //Always defined the type instead using the any 
@Input('user')
set user(value: any) {
    this._user = value;
}

get user() {
  return this._user;
}

and also check null handle in user property, if data delayed.

    //HTML
   <h1>
   {{ user?.name }}
   </h1>
user_63519410

Please make sure you had pass the correct object and it not undefined. Or the best way is have it own default value.

user_105316410

Just simply use @Input() prop: type; in the child component. You can of course also send a object instead of a string

component.ts
@Input() user: string;

component.html
<h1>{{ user }}</h1>

parent.html
<child-component [user]="username"></child-component>
user_68481610

You can simply create a profile.component.ts and use the following in that respective file

constructor(private formBuilder: FormBuilder,private service:Services)
  {
    this.registerForm = this.formBuilder.group({
      userName: ['', Validators.required],
     //other info
    });
  }
ngOnInit() : void{
   this.getDetail();
}

getDetail() {
  this.service.getProfileDetail().subscribe(
    (res: any) => {
      this.userDetail = {
        userName: res.result.userName,
       };
    }
user_141222460
Related