[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' }; } ...