角度-单击后显示其他div

时间:2018-10-20 13:05:15

标签: angular css3 typescript

我会在照片中添加一些额外的div按钮。重要的是,黄色框不能移动元素周围。你能帮忙吗?

enter image description here

1 个答案:

答案 0 :(得分:1)

这个stackblitz示例可以满足您的需求。

https://stackblitz.com/edit/angular-cnbzuv?embed=1&file=src/app/app.component.ts

HTML

<button style="float: right;" (click)="clicked()">click me</button>
  <div *ngIf="buttonClicked" style="clear:both; with:100%; text-align: center; padding:10vh; border-style: solid; border-color: yellow;">Div content here</div>

组件

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  buttonClicked = false;

  clicked(){
    this.buttonClicked = !this.buttonClicked;
  }
}