app.component.html
<ap-photo
url = 'https://external-preview.redd.it/7jotHTAXg5XC56M9EtpTUPzGiwW8Vr1cZkRmudDHdkY.png?width=801&auto=webp&s=02f9fa6ee02c1d7d691890464e957e4efb034d87'
description = 'Chocola'; ></ap-photo>
<ap-photo
url = 'https://yt3.ggpht.com/ytc/AAUvwnhERMC6MhlGq-xPtzqd8CoVZJ_7nG-tHLg25CJKSg=s900-c-k-c0x00ffffff-no-rj'
description = 'Vanilla'></ap-photo>
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { PhotoComponent } from './photo/photo.component';
@NgModule({
declarations: [
AppComponent,
PhotoComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
photo.component.ts
import { Component, Input } from "@angular/core";
@Component({
selector: 'ap-photo',
templateUrl: 'photo.component.html'
})
export class PhotoComponent {
//title = 'Neko Girls';
@Input() description='';
@Input() url='';
}
photo.component.html
<img class = "img-thumbnail" [src]="url" [alt]="description">
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}