I have the following code:

@Component({
  selector: 'app-accountdetailed',
  templateUrl: './accountdetailed.page.html',
  styleUrls: ['./accountdetailed.page.scss'],
})
export class AccountdetailedPage implements OnInit {

  protected itemId = '';

  public item = {
    email: '[email protected]',
    joinDate: '22-11-2022',
    firstName: 'Angular',
    lastName: 'Patel'
  };

  constructor(
    protected route: ActivatedRoute,
    protected userParamService: UserParametersService,
    protected authService: AuthenticationService
  ) {
  }

  ngOnInit() {
    this.itemId = this.route.snapshot.params.id;
    
    switch (this.itemId) {
      case 'yourDetails':
        this.yourDetailsHtml();
    }
  }


  protected yourDetailsHtml() {
    document.getElementById('detailedContent').innerHTML = '                        <ion-item color="dark">\n'  
      '                            <ion-label  position="stacked">Member Since</ion-label>\n'  
      '                            <ion-input id="memberSince" readonly type="text"></ion-input>\n'  
      '                        </ion-item>\n'  
      '                        <ion-item color="dark">\n'  
      '                            <ion-label  position="stacked">Email Address</ion-label>\n'  
      '                            <ion-input id="emailAddress" readonly  type="text">{{item.email}}</ion-input>\n'  
      '                        </ion-item>\n'  
      '                        <ion-item color="dark">\n'  
      '                            <ion-label  position="stacked">First Name</ion-label>\n'  
      '                            <ion-input id="firstName" autocapitalize="words" type="text"></ion-input>\n'  
      '                        </ion-item>\n'  
      '                        <ion-item color="dark">\n'  
      '                            <ion-label  position="stacked">Last Name</ion-label>\n'  
      '                            <ion-input id="lastName" autocapitalize="words" type="text"></ion-input>\n'  
      '                        </ion-item>\n'  
      '      <section>\n'  
      '        <ion-button onclick="memberDetails(\'update\');presentAlert(\'Saved\', \'\');" expand="block">Save</ion-button>\n'  
      '      </section>';
  }
}

as seen based on the path then the HTML will be loaded. I am wondering how I can render the item object to the inputs so the values are set. Eg

<ion-input>{{ item.email }}</ion-input> 

as currently if I do {{ item.email }} it does not work.

Thanks

CodePudding user response：

You should place all of the code in to your HTML and call it using conditions, not in your TypeScript through complex methods.

Consider using *ngIf (Angular NgIf) or *ngSwitch (Angular NGSwitch).

An example for your scenario:

<div *ngIf="value == true">
 // Your HTML here
</div>

Or

<div *ngIf="value == true; else doSomethingElse">
 // Your HTML here
</div>

<ng-template #doSomethingElse>
 <div>
  // If false, display this HTML.
 </div>
</ng-template>