在Angular中，可以使用自定义指令来实现CSS折叠子菜单。以下是一个简单的示例：

1. 首先，创建一个名为collapse.directive.ts的新的Angular指令文件，并添加以下代码：

import { Directive, HostBinding, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appCollapse]',
})
export class CollapseDirective {
  @Input('appCollapse') isOpen = false;
  
  @HostBinding('class.show') get show() {
    return this.isOpen;
  }
  
  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
  }
}

2. 在你需要使用折叠子菜单的组件模板中，添加以下代码：

Toggle Menu


  
Item 1
  
Item 2
  
Item 3

3. 在组件的样式文件（通常是.scss或.css文件）中，添加以下代码：

.menu {
  display: none;
}

.menu.show {
  display: block;
}

4. 最后，在需要使用折叠子菜单的组件中，导入并声明CollapseDirective：

import { CollapseDirective } from './collapse.directive';

@Component({
  ...
  directives: [CollapseDirective],
})
export class YourComponent {
  isOpen = false;
}

现在，当你点击"Toggle Menu"按钮时，折叠子菜单会展开或折叠。