指令是DOM元素上的标记，它们告诉Angular将指定的行为添加到该DOM元素，甚至转换DOM元素及其子元素。
简而言之，它扩展了HTML。
Angular中的大多数指令都以ng开头，其中ng代表Angular。
Angular包括各种内置指令。
除此之外，我们还可以为应用程序创建自定义指令。
ngClass遵循内置指令。

如何使用ngClass指令

ng-class指令将一个或者多个CSS类动态绑定到HTML元素。
ng-class指令的值可以是字符串，对象或者数组。
如果是字符串，则应包含一个或者多个以空格分隔的类名。
作为一个对象，它应该包含键值对，其中键是要添加的类的类名，而值是布尔值。
仅当该值设置为true时，才添加该类。
实现为数组，可以将两者结合使用。
每个数组元素可以是字符串，也可以是对象，如上所述。

以下是有关如何使用ngClass指令的示例。

• ngClass作为字符串

其中我将讨论一个如何将ng-class用作String的示例。
首先，让我们在HTML页面中添加标题或者标题。
为此，我们需要在app.component.html文件中执行以下代码。

<mat-toolbar>
    <h1>Welcome to {{title}}!</h1>
</mat-toolbar>

其中<mat-toolbar>是来自Angular Material的容器，用于标题和标题。
如果我们不熟悉它，可以参考Angular Material上的文章以获取安装信息和演示教程。

接下来，我们需要使用以下命令为项目提供服务：

ng serve -o

这将在系统的默认浏览器上打开项目，如下所示：

现在，我们需要在app.component.css文件中添加某些CSS类。

.first {
    background-color: #3471eb;
}
.second {
    font-size: 30px;
    padding-left: 20px;
}

要将这些类绑定到HTML元素中，我们需要在app.component.html文件中执行以下代码：

<div [ngClass]="'first'">
    ngClass as a String
</div>

要将CSS类绑定到[ngClass]，必须将其包含在单引号(')中，如上所示。
现在，我们需要为项目提供服务以显示输出。

我们甚至可以在一个[ngClass]中绑定两个或者多个CSS类，以使用绑定的类的属性。
例如，我们需要在app.component.css文件中添加以下类。

.third {
    height: 10%;
}
.fourth {
    padding-top: 20px;
}

接下来，我们需要将上述CSS类绑定到位于app.component.html文件中的[ngClass]中。

<div [ngClass]=&rdquo;&rsquo;first second third&rsquo;&rdquo;>
    ngClass as a String
</div>

稍后，我们需要为项目提供服务以显示以下输出。

• 字符串中的* ngFor指令现在，让我向我们展示另一个使用* ngFor指令的示例。 * ngFor`是Angular中的模板指令，用于遍历数组或者对象中声明的元素。然后，它为每个项目创建一个模板。接下来，我们需要首先在位于app.component.ts文件中的以下类中声明一个数组。

export class AppComponent {
    users = [
        ‘theitroad’,
	‘Angular’,
	‘ngClass’
    ];
}

接下来，我们需要在app.component.css文件中添加以下类。

.fifth {
    color: red;
    font-size: 25px;
    padding-left: 20px;
}

随后，我们需要将上述类绑定到位于app.component.html文件中的[ngClass]中。

<div *ngFor=&rdquo;let user of users&rdquo; [ngClass]=&rdquo;&rsquo;fourth fifth&rsquo;&rdquo;>
	{{user}}
</div>

稍后，我们需要为项目提供服务以显示输出。

• ngClass作为数组

其中我将讨论一个如何将ng-class用作数组的示例。
基本上，ng-class绑定为StringCSS类的属性没有变化。
只是CSS类绑定为数组。
让我们看一个例子，以便我们更好地理解。
我们需要在app.component.html文件中执行以下代码。

<div [ngClass]=&rdquo;[&rsquo;first&rsquo;, &lsquo;second&rsquo;, &lsquo;third&rsquo;]&rdquo;>
    ngClass as an Array
</div>

当声明为Array时，CSS类包含在[]方括号中。
让我们现在为项目提供服务，以查看结果。

如上所示，除了Array中绑定的类之外，CSS类的属性没有任何变化。

• ngClass作为对象

继续前进，我将讨论一个如何将ng-class用作对象的示例。
这就像一个布尔值，当返回true时将评估CSS类属性。
否则，当它返回false时，它不会评估CSS Class属性。

我们需要在app.component.html文件中执行以下代码。

<div [ngClass]=&rdquo;{&rsquo;first&rsquo;: true}&rdquo;>
    ngClass as an Object
</div>

在上面的代码中，仅对"第一个" CSS类进行评估，因为它返回true，而对"第二个" CSS类则返回false。
让我们看另一个例子，以更好地理解。

<div [ngClass]=&rdquo;{&rsquo;first&rsquo;: false, &lsquo;second&rsquo;: true, &lsquo;third&rsquo;: true}&rdquo;>
    ngClass as an Object
</div>

现在，我们需要为项目提供服务以显示输出。