Angular PrimeNG按钮模板

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来制作响应式网站非常容易。本文将向我们展示如何在Angular PrimeNG中对Tooltip组件进行造型。

按钮一般用于在点击时执行一些动作。PrimeNG库中的按钮有不同的形状、大小和许多其他属性。这篇文章将展示Angular PrimeNG中的按钮模板。通过使用按钮模板改变正常的行为，我们可以定义自定义内容。

方法：让我们创建一个Angular项目并安装PrimeNG UI模块。然后我们将创建一个UI，展示Angular PrimeNG按钮模板。

Angular PrimeNG Button模板属性：在模板化按钮中没有使用任何属性。

语法:

<button 
pButton 
type="button">

    // Custom Content
</button>

创建Angular项目并安装所需模块：

第1步 。要创建一个angular应用程序，你需要通过npm命令安装angular命令行接口。

npm install -g angular-cli

第2步 。现在我们将创建一个angular项目。

ng new project_name

第3步：在创建你的react项目后，进入文件夹执行不同的操作。

cd project_name

第4步：创建Angular应用程序后，使用以下命令安装所需的模块。

npm install primeng --save
npm install primeicons --save

项目结构：在运行上述步骤中提到的命令后，如果你在编辑器中打开项目，你可以看到一个类似于下图的项目结构。用户所做的新组件或代码修改，我们将在 “src “文件夹中完成。

Angular PrimeNG按钮模板

Project Structure

运行应用程序的步骤 。在项目的根目录下使用以下命令运行该应用程序。

ng serve --open

例子1：我们正在创建一个显示Angular PrimeNG按钮模板的用户界面。在这里，我们在按钮内插入一个有风格的图标作为内容。

app.component.html

<div style="margin:100px; text-align: center;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Button Templates</h3><br />
  
    <button 
        pButton 
        type="button" 
        class="p-button-lg 
        p-button-raised 
        p-button-danger">
  
        <i 
            class="pi pi-bolt" 
            style="font-size: 2rem;
            color: yellow;
            padding:10px;
            border-radius: 10px;
            border: 2px yellow dotted;
            rotate: 10deg;"
        >
        </i>
    </button>
</div>

app.component.ts

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})
  
export class AppComponent { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ButtonModule } from "primeng/button";
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        ButtonModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

输出：现在打开你的浏览器，进入http://localhost:4200/，你会看到以下输出。

Angular PrimeNG按钮模板

例子2：我们正在创建一个显示Angular PrimeNG Button Templating的用户界面。在这里，我们在按钮内插入一个头像**组件作为内容。

app.component.html:

<div style="margin:100px; text-align: center;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Button Templates</h3><br />
  
    <button 
        pButton 
        type="button" 
        class="p-button-lg p-button-raised p-button-danger">
  
        <p-avatar 
            icon="pi pi-prime" 
            size="xlarge" 
            shape="circle"
            [style]="{
                'background-color':'white', 
                'color': 'red'
            }">
        </p-avatar>
    </button>
</div>

app.component.ts:

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})
  
export class AppComponent { }

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ButtonModule } from "primeng/button";
import { AvatarModule } from 'primeng/avatar';
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        ButtonModule,
        AvatarModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

输出。现在打开你的浏览器，进入http://localhost:4200/，你会看到以下输出。

Angular PrimeNG按钮模板