CODEWITHSUNDEEP
angulartypescript
Conor Donohoe
Conor Donohoe

Reputation: 317

How do you show an object in the html template using its keys

I want to have an object displayed in a modal So when I click the read more button it sends the title name and amazon link to a function to pass it to the modal but ngFor wont display an object and there will only be one object sent at a time so I just need to show the object like {{modal.name}} using the key and the value in the html template

/*Function*/
readMore(text: string) {
    this.modal = text;
 }
  <h1 class="uk-flex uk-flex-center uk-width-1-1">{{book.list_name}}</h1>
  <hr class="uk-divider-icon uk-width-1-1">
  <div class="uk-grid uk-grid-divider textali">
  <div class="uk-width-1-3">List Updated {{book.updated | lowercase }}
  </div>
  <div class="uk-width-1-3">
    <a href="#offcanvas-usage" class="uk-button uk-button-primary" uk-toggle>Categorys</a>
  </div>
  <div class="uk-width-1-3">List Published On {{book.published_date | lowercase |date: 'fullDate'}}
  </div>
</div>
  <div class="uk-grid uk-grid-medium" >
  <div class="uk-child-width-1-5@s uk-grid-match" uk-grid>
    <div *ngFor="let name of book.books; let i = index">
      <div class="uk-card uk-card-hover uk-card-body">
        <img src="{{name.book_image}}"><br /><br />
        <span>Summary: {{name.description || ' NA'}}</span><br />
        <hr class="uk-divider-icon">
        <span>Author {{name.author}}</span>
        <br />
        <br />Best Sellers Rank {{name.rank}}
        <br />
        <span>Weeks on List {{name.weeks_on_list}}</span>
        <div class="uk-card-footer">
          <a href="{{name.amazon_product_url}}" class=" button uk-icon-link uk-margin-small-right" uk-icon="icon: cart; ratio: 1.5"></a>
         <span><a class="uk-icon-link uk-margin-small-right" (click)="addFav({title: name.title, image:name.book_image, amazon:name.amazon_product_url})" uk-icon="icon: heart; ratio: 1.5"></a></span>                   /*This is the data im sending*/
          <a (click)="readMore({name: name.title, desc:name.description, author:name.author})" uk-toggle="target: #read-more" class="uk-icon-link uk-margin-small-right" uk-icon="icon: info; ratio: 1.5"></a>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="offcanvas-usage"  uk-offcanvas>
  <div class="uk-offcanvas-bar">
    <button class="uk-offcanvas-close" (click)="this.isButtonVisible = true" type="button" uk-close></button>
    <h3>Categorys</h3>
    <div *ngFor="let section of names">
      <div class=" uk-flex uk-flex-column">
        <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical">
          <li class="uk-active"><a (click)="sectionlink(section.list_name)">{{section.list_name}}</a></li>
        </ul>
      </div>
    </div>
  </div>
  </div>
  <div id="read-more" uk-modal>
    
      <div class="uk-modal-dialog uk-modal-body">
          /*Where the Data gets displayed*/
          <h2 class="uk-modal-title">{{item.name}} </h2>
          <hr class="uk-divider-icon">
          <hr class="uk-divider-icon">
          
          <button class="uk-modal-close uk-button uk-button-danger" type="button">Close</button>
          </div>
  </div>

Upvotes: 0

Views: 271

Answers (1)

Bhagwat Tupe
Bhagwat Tupe

Reputation: 1943

You can use keyvalue pipe for Transforms Object or Map into an array of key value pairs..
you can use as follow *ngFor="let o of object | keyvalue"

Example

<th *ngFor="let o of object | keyvalue">{{o.key}}{{o.value}}</th>

For more information click here keyvalue pipe

Upvotes: 1

Related Questions