0

I have a simple situation and I thought it will be resolved easily. But got stuck.

I have a header component. There are two situations here:

  1. Before login, the text in header component will be "LOGIN" and it will be clickable. On click, it will take me to another external url (lets assume https://www.external.com).

  2. After login, the same header component but text will be "LOGGED IN" and it won't be clickable.

WHAT I TRIED

HTML File (header.html)

<div class="brand pull-left" (click)="onHeaderClick()">    
    <div class="logo"></div>
    <h1>{{headerText}}</h1>  
  </div>



Typescript File (header.ts)

onHeaderClick() {
    debugger;
    if(!this.isLoggedIn) {
      window.open('https://www.external.com', '_blank');
    }
  }

But, its not redirecting me to the specified url and not also opening a new tab. Its just refreshing the same page.

Can anybody please help me out with any solution and also if it can be explained why its not working.

Thanks.

Agnib
  • 79
  • 1
  • 3
  • 11

1 Answers1

1

You should handle the logic of if it's clickable in the Template and not in the TS-logic.
Also don't use divs for onclick events, use buttons or links (in your case this is a link!). You can focus them with the keyboard and also click them with pressing spacebar while it's focused. If you use the semantically correct tag you won't have problems opening it in a new window.

Something like this:

<ng-template #contentTemplate>
   <div class="logo"></div>
   <h1>{{headerText}}</h1>  
</ng-template>

<div *ngIf="!loggedIn; else loggedInBlock">
  <a class="brand pull-left" href="https://www.example.com" target="_blank" > 
   <ng-container [ngTemplateOutlet]="contentTemplate">
</ng-container>
  </a>
</div>
<ng-template #loggedInBlock>
  <ng-container [ngTemplateOutlet]="contentTemplate">
</ng-container>
</ng-template>

And in your .ts file you have a boolean variable named loggedIn If you are logged in this is set to true, otherwise it's set to false.

If you have the same content in both containers, you can either create it's own component for this (and then just use something like app-header-content instead of the ng-container or you use, as I did in the example above, use a template.

Check Angular documentation for other ways to implement if-else logic

cloned
  • 6,346
  • 4
  • 26
  • 38
  • Thanks for the response. The content for both loggedIn and not loggedIn, are same. Only the text will be different. So, within , it would be the same. – Agnib Sep 28 '20 at 07:01
  • You can then just use a template to render the same content twice. I will try to add an example to my answer. – cloned Sep 28 '20 at 07:06