您可以使用Angular的HostListener和Event.target来实现在点击div外部时隐藏一个div。以下是一个示例代码：

在您的组件类中添加以下代码：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  isDivVisible: boolean = false;

  constructor(private elementRef: ElementRef) { }

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

  toggleDiv() {
    this.isDivVisible = !this.isDivVisible;
  }
}

在模板HTML中添加以下代码：

Toggle Div


  

在这个示例中，我们首先在组件的构造函数中注入了ElementRef，它提供了对DOM元素的访问。然后，我们使用HostListener装饰器来监听整个文档的点击事件。在点击事件处理程序中，我们使用contains方法检查被点击的元素是否在组件的根元素之外，如果是，则隐藏div。

您可以根据需要在toggleDiv方法中添加您自己的逻辑来切换div的可见性。