CODEWITHSUNDEEP
angulartypescript
senjust
senjust

Reputation: 119

How to split a component image into components of a images and a image correctly?

I have a 'App' component in Angualar:

import { Component } from '@angular/core';
interface IImages {
  id: number; title: string; url: string;
}
..............
export class AppComponent {
  images: IImages[]  = [
    {
      id: 1,
      title: 'accusamus beatae ad facilis cum similique qui sunt',
      url: 'https://placekitten.com/200/198',
    }, ...

and my HTML

<div class="container">
  <div class="col m3">
    <mat-card class="example-card" *ngFor="let image of images">
      <mat-card-header>
        <mat-card-title>{{image.title}}</mat-card-title>
      </mat-card-header>
      <img mat-card-image [src]="image.url">
    </mat-card>
  </div>

Now ,How to split this component into two, gallery and gallery-item?

Upvotes: 0

Views: 733

Answers (1)

Stanislav Dontsov
Stanislav Dontsov

Reputation: 1741

Try this: https://stackblitz.com/edit/angular-tzfal4

gallery: 

import { Component, Input } from '@angular/core';
import {Image} from './image'

@Component({
  selector: 'app-gallery-container',
  template: '<div class="container">\
      <div class="col m3">\
        <app-gallery-item *ngFor="let image of images" [image]="image">\
        </app-gallery-item>\
      </div>\
    </div>'  
})
export class GalleryContainerComponent  {
  @Input()
  images: Image[];
}

gallery item: 

import { Component, Input } from '@angular/core';
import {Image} from './image'

@Component({
  selector: 'app-gallery-item',
  template: '<mat-card class="example-card">\
      <mat-card-header>\
        <mat-card-title>{{image.title}}</mat-card-title>\
      </mat-card-header>\
      <img mat-card-image [src]="image.url">\
    </mat-card>'  
})
export class GalleryItemComponent  {
  @Input()
  image: Image;
}

Upvotes: 1

Related Questions