根据条件动态添加或删除数据目标和数据切换

Question

如果用户未登录，则动态添加数据目标和数据切换。如果用户未登录，userLoggedIn为false。一种实现方法是

<div *ngIf='userLoggedIn; else notloggedin'><button class="button">GET STARTED</button></div>
<ng-template #notloggedin>
<button data-target="#logiModal" data-toggle="modal" class="button">GET STARTED</button>
</ng-template>

但是我正在寻找一种无需重复按钮的解决方案

html文件

<button data-target="#logiModal" data-toggle="modal" class="button">GET STARTED</button>

ts文件

export class LoginComponent implements OnInit {
  userLoggedIn: boolean = false;

  constructor(private auth: AuthService) { }

  ngOnInit() {
    this.auth.isUserLoggedIn.subscribe((v)=>{
      if(v) {
        this.userLoggedIn = true;
      }
    });
  }