Добавление динамических стилей в текст с использованием Angular

Question

Как мне динамически добавлять стили к тексту в определенной позиции, используя угловые, без использования innerHTML, Jquery или dom манипуляций?

Например.Hello World Я хотел отобразить как Привет Мир

Hello Должно быть bold, а World должно быть в italic.

Итак, вот то, о чем я думаю,

let text = 'Hello World'
let style = {word:'Hello',type:'bold',word:'World',type:'italic'}

Итак, на основе ввода style, text должен автоматически получить стиль на основе своего типа.

Isэто можно сделать в Angular без манипуляций с домом?

Пожалуйста, ведите меня.

Answer 1

Вы можете посмотреть на ngStyle - https://angular.io/api/common/NgStyle

Answer 2

Используйте свойство font-style, чтобы сделать его курсивным. документы шрифтового стиля

Используйте свойство font-weight, чтобы сделать его жирным. вес шрифта docs

Используйте ngStyle, как предлагали другие. ngStyle docs

Это будет выглядеть примерно так:

.style1 {
    font-weight: bold;

}

.style2 {
    font-style: italic;

}

<div>
    <span [ngStyle]="{'style1': condition}">Hello</span><span [ngStyle]="{'style2': condition}">World</span>
</div>

Answer 3

Вы можете определить стиль в css с помощью классов и использовать директиву ngClass для условного добавления классов к элементу.