Is there a way to showcase the contents of the angular "tags" object seamlessly?

Question

Is there a way to showcase the contents of the angular "tags" object seamlessly?

Is there a way to show the content of the "tags" object using angular?

I attempted to achieve it using

{{gallery.tags.tag}}

but unfortunately, it did not work

import {IPhoto} from "./iphoto";

export interface IGallery {
  galleryId: string;
  title: string;
  dateCreated: string;
  thumbUrl: string;
  description: string;
  tags?: any;
  photos: IPhoto[];

}

export const Galleries = [{
    'galleryId': '1',
    'title': 'China',
    'dateCreated': '2017-11-15T00:00:00+00:00',
    'thumbUrl': './assets/img/gallery/D1.jpg',
    'description': 'Vacation in China',
    'tags': [{
        'tag': 'Indonesia',
    }, {
        'tag': 'Water'
    }],

gallery.component.html

<h2>Gallery: {{gallery.title}}
    <p><small>{{gallery.dateCreated | polishDate | uppercase}}</small></p>
    <br><small>galleryId: {{gallery.galleryId}}</small>
    <p>description: {{gallery.description}}</p>
    <img src="{{gallery.thumbUrl}}">

javascript angular typescript

Answer 1

Answer №1

To display multiple galleries, you can use the *ngFor directive in Angular

<div *ngFor="let gallery of galleries">
    <p><small>{{gallery.dateCreated | polishDate | uppercase}}</small></p>
    <br><small>galleryId: {{gallery.galleryId}}</small>
    <p>des: {{gallery.description}}</p>
    <img src="{{gallery.thumbUrl}}">
    <div>
        <span *ngFor="let tag of gallery.tags">
            {{tag.tag}}
        </span>
    </div>
</div>

Answer 2

To display multiple galleries, you can use the *ngFor directive in Angular

<div *ngFor="let gallery of galleries">
    <p><small>{{gallery.dateCreated | polishDate | uppercase}}</small></p>
    <br><small>galleryId: {{gallery.galleryId}}</small>
    <p>des: {{gallery.description}}</p>
    <img src="{{gallery.thumbUrl}}">
    <div>
        <span *ngFor="let tag of gallery.tags">
            {{tag.tag}}
        </span>
    </div>
</div>

Is there a way to showcase the contents of the angular "tags" object seamlessly?

Answer №1

Similar questions

How can you start a jQuery script following a triumphant Ajax callback?

Error message: "Named export cannot be identified"

Troubleshooting jQuery compatibility issue in IE6 when using javascript and loading content through ajax

Is it possible to detect a swipe event without relying on third-party libraries

JavaScript Issue: Unable to Update or Delete Table Row Data

The jqGrid colModel is failing to execute a function as expected

Retrieve information from a form in AngularJS without relying on two-way data binding

Creating a Unique Navigation Bar Design in Bootstrap 4 with Custom Styling for Active

Increasing Asynchronous Capabilities with Dynamically Updating jQuery Deferred within then() Method

Expect a promise to be resolved in the RootCtrl of Angular using $http

Encountering a NgForm provider error in Angular 4.4.6 development mode

Troubleshooting Angular2 ngFor: Finding a Fix

Oops! Looks like there's an issue with the NextJS Custom Carousel bug. The error message reads: ReferenceError: document is not defined and is unable to read properties of undefined (

How can I retrieve the offset top of a td element in relation to its parent tr element?

Learning the ropes: Building a model with nodejs using tensorflow.js

Utilizing ALERTIFY JS (v1.9.0) with Angular 2: Step-by-Step Guide

The parameter type x cannot be assigned to the argument type '(x) => ObservableInput<{}>'

Designing personalized plugins with Typescript in Nuxt

getting rid of the angular hash symbol and prefix from the anchor tag

When implementing Swiper in TypeScript, an error is encountered: TypeError - Attempting to invoke the Swiper class constructor without using the 'new' keyword