שיעור 14 באנגולר (angular) – שליטה בתצוגה עם ngClass \ ngStyle

בדוגמאות הבאות, אציג 2 מאפיינים חשובים לטיפול בעיצוב :  ngClass+ngStyle.

בשתי המקרים, אני אתן דוגמא לשימוש ללא המאפיין, ודוגמא שכוללת אותו.

הגדרה באנגולר של css class שמופעל רק אם משתנה הוא true

נניח ואנחנו רוצים שאלמנט יקבל עיצוב מסוים, רק אם משתנה בוליאני הוא אמת.

לצורך כך, נרשום מאפיין של angular, שקושר את ה-css class, אל המשתנה.

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-ngclass2',
 template: `
 <h1>Hello World</h1>
 <h4 [class.special]="isSpecial" >Special Sentence</h4>
 
 
 `,
 styles: [
 ` .special {
 color: yellow
 }
 `
 ]
})
export class Ngclass2Component implements OnInit {

 isSpecial = false;
 canSave = true;

 constructor() { }

 ngOnInit() {
 }

}



השמת מספר קלאסים יחד על אלמנט באנגולר באמצעות ngClass

בדוגמת קוד הבאה, אנחנו נותנים מאפיין שמכיל אוביקט, ובאובייקט יש מספר קלאסים יחד, והם מוחלים יחד על האלמנט.

  • שימו לב לשימוש ב-ngClass
  • שימו לב להפעלה של הפונקציה שממלאת את האוביקט , ואני קורא לה בקונסטרקטור.

 

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-ngclass2',
 template: `
 <h1>Hello World</h1>
 <h4 [class.special]="isSpecial" >Special Sentence</h4>
 <h4 [ngClass]="currentClasses">Saveable and Special div</h4>
 
 `,
 styles: [
 ` .special {
 color: green
 }
 .saveable {
 text-transform: uppercase;
 }
 `
 ]
})
export class Ngclass2Component implements OnInit {

 isSpecial = true;
 canSave = true;

 currentClasses = {};

 constructor() { 
 this.setCurrentClasses();
 }

 ngOnInit() {
 }

 setCurrentClasses(){
 this.currentClasses = {
 saveable: this.canSave,
 special: this.isSpecial
 }
 }
}

 

הפעלה של עיצוב באמצעות משתנה

בדוגמא הבאה, אנחנו קובעים את גודל הפונט, לפי משתנה מסוים במחלקה.

שימו לב ל-syntax, שבו למעשה כל משפט התנאי הוא בתוך הגרשיים.

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-ngstyle2',
 template: `
 
 <h1> ng style</h1>
 <div [style.font-size]="isSpecial ? '40px' : '8px'">Font size depends on isSpecial</div>
 `
})
export class Ngstyle2Component implements OnInit {

 isSpecial:boolean = true;
 canSave:boolean = true;

 constructor() { }

 ngOnInit() {
 }

}

הפעלה של מספר עיצובים יחד באמצעות ngStyle

בדוגמת הבאה, אני קובע מספר הגדרות CSS יחד, ומחיל אותם בתור אובייקט, על אלמנט מסוים.

  • שימוש לב לשימוש במאפיין ngStyle
  • שימו לב להפעלה של הפונקציה שממלאת את האובייקט ומופעלת מהקונסטרקטור.
import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-ngstyle2',
 template: `
 
 <h1> ng style</h1>
 <div [style.font-size]="isSpecial ? '40px' : '8px'">Font size depends on isSpecial</div>
 
 <div [ngStyle]="currentStyles">One More DIV</div>
 `
})
export class Ngstyle2Component implements OnInit {

 isSpecial:boolean = true;
 canSave:boolean = true;
 currentStyles = {};


 constructor() { 
 this.setCurrentStyles();
 }

 setCurrentStyles(){
 this.currentStyles = {
 'font-style': this.canSave ? 'italic' : 'normal',
 'font-size': this.isSpecial ? '24px' : '12px'
 }
 }

 ngOnInit() {
 }

}

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *