在Angular中，视图模型是组件的一部分，用于管理组件与视图之间的数据交互。视图模型是一个普通的Typescript类，它包含了组件的数据和方法。

下面是一个示例的Angular组件及其视图模型的代码：

1. 创建一个名为 "user.component.ts" 的组件文件，并添加以下代码：

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

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {
  // 视图模型的数据
  username: string = '';

  // 视图模型的方法
  updateUser() {
    // 在这里可以进行数据处理或提交表单等操作
    console.log('Updated user: ', this.username);
  }
}

2. 在同一目录下创建一个名为 "user.component.html" 的HTML模板文件，并添加以下代码：

User Component


Update

在上面的代码中，使用了Angular的双向数据绑定 [(ngModel)] 来绑定输入框的值和视图模型中的 "username" 属性。当用户在输入框中输入文本时，视图模型中的属性也会相应地更新。当点击 "Update" 按钮时，会调用视图模型中的 "updateUser" 方法，这里我们只是简单地将用户输入的值打印到控制台。

3. 在需要使用该组件的模块中引入并声明该组件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { UserComponent } from './user.component';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在上述代码中，我们将 "UserComponent" 添加到了 "declarations" 数组中，以使其能够被其他组件使用。

这样，在使用该组件的模板中，只需要使用 标签即可引用该组件并显示相应的视图。

以上就是一个简单的Angular视图模型的示例，通过组件和视图模型的结合，我们可以实现数据的双向绑定和处理。当然，实际应用中，视图模型还可以包含更多的属性和方法，用于处理更复杂的数据交互逻辑。