Использование стилей / классов в литерале шаблона angular 4

Question

Я пытаюсь стилизовать поле ввода для поиска, в котором псевдоним подобласти появляется слева, а parent.name - в крайнем правом углу для каждой подобласти в раскрывающемся виде.

Я следил за некоторыми связанными статьями людей, использующих document.getElementById () и добавляющих стиль к нему. Но причина, по которой это не сработало для меня, заключается в том, что я использую ввод html с пользовательской директивой, чтобы показать список выделенных мест.

Это то, что я пытаюсь сделать.

temp.push({
 ...
alias: `<div>
         <p style="float:left">${eachSubLoc.alias}</p> 
         <p style="float:right">${this.titleCase.transform(eachSubLoc.parent.name)}</p> 
       </div>`,
});

Я пытался использовать HTML в литерале шаблона, который работает, как показано, но я не могу добавить стили к

тег типа 'float: left' et c .. Есть ли что-то дополнительное, что необходимо сделать в приложении, чтобы получить доступ к стилю в литерале шаблона?

Используемая версия: Angular 4 .

Будем благодарны за любые предложения. Thankyou.