אנגולר - SCSS

[ממ]

צהרים טובים
אני צריכה להציג את כל אותיות הא"ב בשורה בתחתית העמוד ואז אות אחרי אות צריכות לזוז כל אחת למקום שמוגדר לה ואח"כ כל אות נשלחת לסרבר לבדיקה כלשהי
האם הדרך הנכונה היא להגדיר לכל אות משתנה?
(22 משתנים ..)

[dovid]

@ממ אמר באנגולר - SCSS:

האם הדרך הנכונה היא להגדיר לכל אות משתנה?

לא. יוצרים מבנה נתונים, כמו מערך או אובייקט ומציבים בו את כל האותיות עם הבדיקות המתאימות פר אות. כיון שזה typescript קשה לי לכתוב לך דוגמה, אבל תחשבי למשל על קלאס שמייצג אות בודדת, ולולאה שיוצרת את כל הקלאסים, ממעבר (לולאה או map) על משתנה פשוט שמכיל את כל האותיות.

[יוסף בן שמעון]

@ממ אני הייתי יוצר את המערך כך

const chars = 'אבגדהוזחטיכלמנסעפצקרשתםןץףךןףץ';
@Component({
    selector: 'app-c',
    templateUrl: './c.component.html',
    styleUrls: ['./c.component.scss']
})
export class CComponent implements OnInit, OnDestroy {
    chars = chars.split('');
    ngOnInit(){
        this.chars.forEach(char => {
            this.doSomthing(char);
        })
    }
}

[ממ]

אוקי,
נגיד אני יוצרת את זה בתוך מבנה נתונים כזה:

chars = { alef = 'א',
bet = 'ב',
....}

ב html אני מגיעה לערך כך:

chars.alef

עכשיו אני רוצה לעצב את המיקום שלו וכו ב CSS איך אני נגשת אליו משם?
לכל אות יש מיקום שונה ועיצוב שונה
תודה!!!

[יוסף בן שמעון]

@ממ אם זה מאפיין ייחודי לכל אות, אפשר להכניס את זה למבנה הנתונים, כך:

chars = [
    {
        char: 'א',
        position: 'left',
        color: 'red'
    },
    {
        char: 'ב',
        position: 'right',
        color: 'blue'
    },
]

וכך אפשר להחיל את הסטייל מההטמל

<div *ngFor="let char of chars" [style.color]="char.color">{{char.char}}</div>

[ממ]

@יוסף-בן-שמעון - תודה!
לא כל כך הבנתי את המיקום איך הוא מתבטא ב-HTML?
נתת שם ביטוי רק ל-COLOR

[יוסף בן שמעון]

@ממ תביאו דוגמא איך הייתם מעצבים אות אחת רק דרך ה CSS בלי התערבות של ה TS