1. 首先，在 Angular 中创建一个组件，使用 @Component 装饰器来装饰组件。定义组件的模板、样式和逻辑。

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

@Component({
    selector: 'app-my-component',
    template: '
My Component
',
    styles: [`
        h1 {
            color: red;
        }
    `]
})
export class MyComponent {}

2. 然后，使用 @NgModule 装饰器来定义一个 Angular 模块，并将组件添加到该模块的声明数组中。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyComponent } from './my-component.component';

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

3. 接下来，在你的 Angular 应用中使用这个组件。你可以在任何地方使用该组件，像使用原生的 HTML 元素一样使用它。例如，在 AppComponent 中使用 MyComponent。

import { Component } from '@angular/core';
import { MyComponent } from './my-component.component';

@Component({
    selector: 'app-root',
    template: ''
})
export class AppComponent {}

在这个示例中，AppComponent 模板中使用 标签显示 MyComponent。

4. 最后，构建你的应用程序并在浏览器中运行它。你的应用程序中现在应该使用你的 Angular WebComponent。

注意：在 Angular 中，Web Component 是指可以与其他框架和原生 HTML 元素进行交换的可重用组件。它是一个包含模板、样式和逻辑的自包含组件，可以被其他应用程序使用，而不需要担心它们的内部实现细节。