在Angular中实现下拉菜单的切换和关闭外部点击，可以使用以下代码示例：

1. 在组件的HTML模板中，定义一个按钮和一个下拉菜单容器：

Toggle Dropdown


  

2. 在组件的CSS样式文件中，定义下拉菜单容器的样式：

.dropdown-container {
  position: relative;
}

3. 在组件的Typescript代码中，实现下拉菜单的切换和关闭外部点击的逻辑：

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

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
  dropdownVisible = false;

  constructor(private elementRef: ElementRef) { }

  toggleDropdown() {
    this.dropdownVisible = !this.dropdownVisible;
  }

  @HostListener('document:click', ['$event'])
  onClick(event: Event) {
    if (!this.elementRef.nativeElement.contains(event.target)) {
      this.dropdownVisible = false;
    }
  }

  stopPropagation(event: Event) {
    event.stopPropagation();
  }
}

在上面的代码中，toggleDropdown()方法用于切换下拉菜单的显示状态。@HostListener('document:click', ['$event'])装饰器监听了整个文档的点击事件，并调用onClick()方法判断点击事件是否发生在下拉菜单容器之外，如果是，则关闭下拉菜单。

stopPropagation()方法用于阻止下拉菜单容器的点击事件冒泡到文档级别，以防止点击下拉菜单容器时触发文档点击事件。

需要注意的是，上述代码中的DropdownComponent是一个示例组件名，需要根据实际情况进行修改和适配。