SoFunction
Updated on 2025-04-13

Angular dynamic binding style and a summary of how to change UI frame style

AngularJS Introduction

AngularJS is a JavaScript framework. It can be added to HTML pages via the <script> tag.

AngularJS extends HTML through directives and binds data to HTML through expressions.

AngularJS is a JavaScript framework

AngularJS is a JavaScript framework. It is a library written in JavaScript.

AngularJS is published as a JavaScript file and can be added to the web page through the script tag:

<script src="/libs//1.4.6/">>

1: angular dynamic binding style

Take a chestnut:

<tr *ngFor="let dataTr of tableData;let i = index" [formGroupName]="i" [ngClass]='isHideClass(i)'>

 isHideClass(index){
  const data = [index];
  // if(data['532411351520251904'].===''&&data['532411588670394368'].===''
  // &&data['532411670509654016'].==='') {
  //  return 'hide_tr'
  // }
  let arr = [];
  for (let i in data) {
   (data[i]);
  }
  if(((val,idx)=>{
    return  === ''
  })){
   return 'hide_tr'
  }
 }

hide_tr is the class name,

.hide_tr{
display: none !important;
}

Explanation: The class name to be bound to ngClass will call the defined in the component during the process of tr generating html based on the data loop.isHideClass()Method, and bring i (index) over to let the method use
Based on the class name returned by the method logic, bind the written styleisHideClass(index){return 'hide'}, At this time, the ngClass is bound to the style of the class name hide

2: angular change the UI framework style (the example is Ant Financial's UI framework)

example:

::ng-deep{
  .ant-card-head-title{
   font-weight: bold;
  }
  .ant-table-placeholder{
   display: none;
  }
  .ant-card-body {
   padding-bottom: 0px
  }
  .hide_tr{
   display: none !important;
  }
 }

Add: ng-deep in front of the style you want to change, and you can change the style defined by the framework.

Summarize

The above is the summary of Angular dynamic binding style and how to change the UI framework style introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!