Angular ngstyle: cara gaya komponen dalam sudut 12 – Codewithaden

Styling Komponen Anda adalah bagian penting dari aplikasi bertenaga frontend Anda. Angular memberikan arahan ngstyle yang membantu kita menata komponen spesifik. Tentu saja, Anda dapat menata komponen tunggal atau berganda, tetapi apa itu ngstyle? Mari kita selami itu.

Angular ngstyle

Angular ngstyle adalah arahan bawaan yang memungkinkan Anda mengatur yang diberikan Dom Properti gaya elemen. Kuncinya adalah nama gaya, dan nilainya adalah ekspresi yang akan dievaluasi. Nilai non-nol yang dihasilkan, dinyatakan dalam unit yang diberikan, ditugaskan ke properti gaya yang diberikan.

Ini menetapkan satu atau lebih sifat gaya, ditentukan sebagai pasangan nilai kunci yang dipisahkan oleh usus.

Arahan atribut yang memperbarui gaya untuk elemen HTML yang mengandung. Jika hasil evaluasi adalah nol, gaya yang sesuai dihapus.

Cara menggunakan sudut 12 ngstyle

Kami akan melihat metode yang berbeda untuk secara dinamis menetapkan gaya CSS ke elemen menggunakan properti gaya. Tapi, pertama, mari kita instal proyek sudut baru dan ikuti langkah -langkah di bawah ini.

Jika Anda tidak memiliki CLI sudut terbaru, Anda perlu Perbarui CLI Angular . Untuk panduan lebih lanjut, lihat tutorial ini. Sekarang, buat proyek baru menggunakan perintah berikut.

ng new angulardata 

Sekarang, masuk ke dalam folder dan buka folder Kode Studio Visual

Selanjutnya, instal Bootstrap 4 CSS Kerangka menggunakan perintah berikut. Anda dapat melewatkan langkah memasang bootstrap karena kami tidak perlu terlalu banyak gaya di sini.

npm install bootstrap --save 

Sekarang, tambahkan Bootstrap CSS file di dalam Angular.json mengajukan.

"styles": [
    "src/styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
], 

Langkah 1: Buat file model.

Di dalam SRC >> Aplikasi folder, buat satu file yang dipanggil Karakter.ts mengajukan dan menambahkan kode berikut di dalamnya.

// Character.ts

export default class Character {
    actor_name: String;
    character_name: String;
    gender: String;
    status: String;
} 

Kami akan menampilkan karakter Game of Thrones dan properti mereka seperti Actor_name Nama karakter , jenis kelamin , status , dll.

Langkah selanjutnya adalah membuat array data di dalam app.component.ts mengajukan.

// app.component.ts

import { Component } from '@angular/core';
import Character from './Character';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   characters: Character[] = [
    {
       actor_name: 'Peter Dinklage',
       character_name: 'Tyrion Lannister',
       gender: 'Male',
       status: 'Alive'
    },
    {
       actor_name: 'Sean Bean',
       character_name: 'Ned Stark',
       gender: 'Male',
       status: 'Dead'
    },
    {
       actor_name: 'Emilia Clark',
       character_name: 'Khaleesi',
       gender: 'Female',
       status: 'Alive'
    },
    {
       actor_name: 'Catelyn Stark',
       character_name: 'Michelle Fairley',
       gender: 'Female',
       status: 'Dead'
    }
  ];
} 

Langkah 2: Buat tampilan HTML untuk menampilkan data dalam sudut

Langkah terakhir adalah menulis kode HTML untuk menampilkan data.

Kami pertama -tama akan menampilkan data dalam format tabel.

Tulis kode berikut di dalam app.component.html mengajukan.

NgStyle

{{ celeb.actor_name }} ({{ celeb.character_name }}) is {{celeb.gender}} character and {{celeb.status}}

Kami telah melingkar melalui karakter Data dalam kode di atas dan menampilkan data satu per satu.

Kami telah menggunakan ngstyle Arahan untuk menetapkan gaya ke elemen P.

Kami telah menetapkan gaya bersyarat. Misalnya, jika karakternya mati, itu akan menunjukkan warna latar belakang merah, jika tidak hijau. Jadi, kami telah menerapkan gaya bersyarat menggunakan The ngstyle Petunjuk dalam Angular.

Simpan file dan lihat output di browser.

Angular Angular ngstyle menjadi jauh lebih membantu ketika nilainya dinamis. Misalnya, nilai dalam objek literal yang kami tetapkan ngstyle dapat berupa ekspresi javascript, yang dievaluasi. Kemudian, hasil dari ekspresi itu digunakan sebagai nilai properti CSS.

Kami dapat menetapkan jenis gaya berikut ke elemen HTML menggunakan ngstyle pengarahan.

Atur font elemen yang mengandung ke hasil ekspresi.

... 

Atur lebar elemen yang mengandung ke nilai piksel yang dikembalikan oleh ekspresi.

... 

Tetapkan kumpulan nilai gaya menggunakan ekspresi yang mengembalikan pasangan nilai kunci.

... 

Tambahkan beberapa gaya CSS dalam sudut.

Saat menetapkan banyak gaya berbeda ke suatu item, sintaksnya menjadi membingungkan dan berantakan. Inilah sebabnya mengapa ada cara yang berbeda untuk menetapkan gaya dalam sudut menggunakan arahan ngstyle.

Selain properti gaya, Ngstyle mengambil objek yang berisi nama gaya dan nilainya.

Lihat contoh kode berikut.


Millie Bobby Brown

Mengikat sifat dalam sudut

Mengikat properti, kami tidak perlu penawaran tunggal untuk nilainya.

Lihat cuplikan kode.

Millie Bobby Brown

Mengevaluasi ekspresi dalam sudut

Ini adalah bagaimana mengevaluasi ekspresi dengan Ngstyle bekerja.

Millie Bobby Brown

Kesimpulan

Tutorial ini menemukan bagaimana kita bisa menggunakan arahan ngstyle untuk menetapkan gaya secara dinamis menggunakan Angular.

Itu untuk tutorial ini.

Posting yang disarankan

Angular ngclass

Crud sudut

Pipa sudut

Seret dan drop sudut

Tinjauan Arsitektur Angular

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *