How to insert array object property value into HTML? - html

Question

I wanted to make a simple carousel using DOM manipulation, I don't know if I can do this or not in Angular, but the idea is I created an array of objects with properties that I want to pass to the HTML using interpolation, and I don't know how to do it yet. Here's my code:
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h1 class="mt-5 mb-1"><strong>carousel</strong></h1>
<div class="container">
<div class="row">
<div class="col-12">
<div class="carousel-container">
<div class="carousel-cell">
<div class="row text-center">
<div class="col-12">
<div class="row carousel-control">
<div class="col-2 carousel-prev fa-2x" (click)="carouselPrev()">
<fa-icon [icon]="faChevronLeft" class="mr-2"></fa-icon>
</div>
<div class="col-7 col-md-2">
<div class="carousel-image">
<img [src]="carousel.image" alt="carousel image">
</div>
</div>
<div class="col-2 carousel-next fa-2x" (click)="carouselNext()">
<fa-icon [icon]="faChevronRight" class="mr-2"></fa-icon>
</div>
</div>
</div>
<div class="col-12">
<div class="carousel-text mt-4">
<h3>{{carousel.description}}</h3>
<p><em> {{carousel.name}}, <span>{{carousel.affiliation}}</span></em></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
import { Component } from '#angular/core';
import { Router } from '#angular/router';
import {faChevronLeft, faChevronRight, IconDefinition} from '#fortawesome/free-solid-svg-icons';
#Component({
selector: 'app-carousel',
templateUrl: './carousel.component.html',
styleUrls: ['./carousel.component.scss']
})
export class CarouselComponent implements OnInit {
faChevronLeft: IconDefinition = faChevronLeft;
faChevronRight: IconDefinition = faChevronRight;
carousel = [
{
id: 1,
name: 'captain america',
affiliation: 'camp lehigh',
description: 'language!',
image: 'http://picsum.photos/200'
},
{
id: 2,
name: 'thor',
affiliation: 'asgard',
description: 'i am god of thunder!',
image: 'http://picsum.photos/200'
},
{
id: 3,
name: 'tony stark',
affiliation: 'stark industries',
description: 'and i....am..iron man!',
image: 'http://picsum.photos/200'
}
];
constructor(
) {}
ngOnInit() {
}
carouselPrev() {
// i want to make this a control by making the id/index +1
}
carouselNext() {
// i want to make this a control by making the id/index -1
}
}

Answer 1

You can achieve it using ngFor with index.
Live example: https://stackblitz.com/edit/angular-b5qvwy
Some code:
Basic HTML
<h1>{{list[i].name}}</h1>
<div (click)="prev()"><</div>
<div (click)="next()">></div>
Basic TS code
export class AppComponent {
list = [
{
name: "Jhon"
},
{
name: "Joe"
},
{
name: "Marth"
}
];
i = 0;
prev(){
if(this.i > 0){
this.i--;
}
}
next(){
if(this.i < this.list.length -1){
this.i++;
}
}
}
For your example, simply do that in the html:
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h1 class="mt-5 mb-1"><strong>carousel</strong></h1>
<div class="container">
<div class="row">
<div class="col-12">
<div class="carousel-container">
<div class="carousel-cell" *ngIf="carousel[i].id">
<div class="row text-center">
<div class="col-12">
<div class="row carousel-control">
<div class="col-2 carousel-prev fa-2x" (click)="carouselPrev()">
<fa-icon [icon]="faChevronLeft" class="mr-2"></fa-icon>
</div>
<div class="col-7 col-md-2">
<div class="carousel-image">
<img [src]="carousel[i].image" alt="carousel image">
</div>
</div>
<div class="col-2 carousel-next fa-2x" (click)="carouselNext()">
<fa-icon [icon]="faChevronRight" class="mr-2"></fa-icon>
</div>
</div>
</div>
<div class="col-12">
<div class="carousel-text mt-4">
<h3>{{carousel[i].description}}</h3>
<p><em> {{carousel[i].name}}, <span>{{carousel[i].affiliation}}</span></em></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>