文本绑定
html部分:
<p [innerHTML]="msg"></p>可渲染html标签
<p>{{msg}}</p>渲染文字
ts部分:
设置msg值msg='我<em>爱</em>你';
图片绑定
html部分:
三种格式
ts部分:
url = "https://www.baidu.com/img/bd_logo1.png";
标题绑定
html部分:
<p [title]="msg">我爱我的祖国</p>
ts部分:
title = 'myng'; msg='xxxx';
事件绑定
<button (click)="flag=!flag">变身</button>控制flag的状态为true或false
<button (click)="msg='神奇文本'">神奇文本</button>改变msg内容为神奇文本
<button (click)="msg=event)">响应函数</button>绑定函数,弹出事件
表单绑定
列表渲染
类和样式的绑定
ts部分:
myclass='active';
mystyle = {color:"blue",'font-size':'38px','font-weight':'900'};
style部分:
.active{color:orangered}
heckbox绑定
html部分:
<input type="checkbox" [(ngModel)]="sel">阅读并同意条款
<button [disabled]="!sel">登录</button>
ts部分:
sel =false;默认不同意
管道--默认管道 过滤器
截取管道