[Angular]ngStyle로 CSS 동적으로 조작하기

[Angular]ngStyle로 CSS 동적으로 조작하기

Angular에서 CSS를 동적으로 조작하기 위해 node_module의 기능 [ngStyle]을 사용한다. 아래 템플릿을 원할 때만 표시되도록 조작하려면 “”안에 해당 템플릿을 조작하기 위한 변수를 하나 선언하여 ts 파일에서 해당 변수를 조작할 수 있다.

<div [ngStyle]="styleDisplayNone"><div>

@Component({
  selector: 'sea-contract-new',
  templateUrl: './contract-new.component.html'
})
export class ContractNewComponent extends SclComponent implements OnInit {
...

  styleDisplayNone: any = { display: 'none' };

constructor() {}


ngOnInit(): void {
    this.isSalesAgent = this.dataInfo.isSalesAgent;

    if (this.dataInfo.isSalesAgent === true) {
...
      this.styleDisplayNone = { display: 'none' };
   
  }

...