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

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

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

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

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

chars.alef

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

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);
        })
    }
}

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

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