在HTML和CSS中使用Angular 5视图模型中的变量，可以通过以下步骤解决：

1. 在组件类中定义需要在HTML和CSS中使用的变量。例如，我们在组件类中定义一个名为"color"的变量：

export class MyComponent {
  color: string = 'red';
}

2. 在HTML中使用{{}}语法，将变量绑定到相应的元素中。例如，我们可以将"color"变量绑定到一个div的背景颜色上：

3. 在CSS中使用:host选择器，通过:host-context()函数来访问组件类中定义的变量。例如，我们可以使用:host选择器来设置div的文本颜色：

:host {
  color: var(--my-color);
}

4. 在组件类中使用@HostBinding()装饰器，将变量绑定到:host选择器中定义的CSS属性上。例如，我们可以将"color"变量绑定到--my-color属性上：

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

export class MyComponent {
  @HostBinding('style.--my-color')
  color: string = 'blue';
}

这样，我们就可以在HTML和CSS中使用Angular 5视图模型中的变量了。