Angular组件和CDK之间的区别在于它们的作用和用途。

Angular组件是用于构建用户界面的基本构造块。它们可以包含模板、样式和逻辑，并且可以被其他组件引用和嵌套。组件通过使用装饰器（@Component）进行定义，并且可以具有输入和输出属性。

下面是一个简单的Angular组件示例：

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

@Component({
  selector: 'app-example',
  template: `
    
{{ title }}
    Click me
  `,
  styles: [`
    h1 {
      color: blue;
    }
  `]
})
export class ExampleComponent {
  title = 'Example Component';

  onClick() {
    console.log('Button clicked');
  }
}

CDK（Component Dev Kit）是Angular团队提供的一组可重用的UI组件和工具，用于构建复杂的用户界面。CDK组件是基于原生的Web平台API构建的，并且可以自由组合和扩展。它们不包含任何特定的样式或外观，并且可以与任何样式框架一起使用。

下面是一个简单的CDK组件示例：

import { Component } from '@angular/core';
import { Overlay } from '@angular/cdk/overlay';

@Component({
  selector: 'app-example',
  template: `
    Open Overlay
  `
})
export class ExampleComponent {
  constructor(private overlay: Overlay) {}

  openOverlay() {
    // Code to open overlay
  }
}

在这个示例中，我们使用CDK的Overlay服务来打开一个浮层。注意，CDK组件并不直接与UI交互，而是提供了一些底层的功能和工具，以便我们可以构建自定义的用户界面。

总结起来，Angular组件用于构建具有特定样式和功能的用户界面，而CDK组件用于提供底层的功能和工具，以便我们可以构建自定义的用户界面。