app/components/to-do/to-do.component.ts
export class ToDoComponent 內新增
Title: string = 'To Do Lists';
imageLink:string= "https://cdn-icons-png.flaticon.com/512/4697/4697260.png";
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import { Component } from '@angular/core';
@Component({
selector: 'app-to-do',
standalone: true,
imports: [],
templateUrl: './to-do.component.html',
styleUrl: './to-do.component.scss'
})
export class ToDoComponent {
Title: string = 'To Do Lists';
imageLink:string= "https://cdn-icons-png.flaticon.com/512/4697/4697260.png";
}
|
to-do.component.html
資料使用花刮號渲染
圖面使用[src]="定義的圖片位址"
1
2
3
4
5
| <div class="title">
<h1 >{{Title}}</h1>
<img [src]="imageLink" alt="">
</div>
|