CODEWITHSUNDEEP
angularangular2-routing
Java Curious ღ
Java Curious ღ

Reputation: 3702

Angular2 *ngIf multiple condition

I am working on angular2 sample application.

I have added 1 menuViews object it have name, icon and url member inside it.

In page I am iterating that menuViews that is working fine.

I have some scenarios, some of url will be inner site URL like ../app/histoy but in some cases it is 'https://play.google.com/'

Following is my html code:

<li *ngFor="let item of menuViews">
    <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
        <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span>
    </a>            
</li>

so in <a> tag I want to put condition like:

if (item.url.indexOf("http://") == -1 && item.url.indexOf("https://") == -1) {
    //set value in [routerLink]
} else {
    //set value in href
}

so kind of condition I want in this. Mainly I want to bifurcate internal and external links.

main problem is that, when it it external links then it tries to redirect at base url + external link (localhost:4200#home/https://play.google.com) which is wrong, so I want to manage both based on some condition.

Other suggestion also welcomed..

Upvotes: 2

Views: 8096

Answers (3)

Rajesh.k
Rajesh.k

Reputation: 2437

you can simply use like below

<div *ngIf="question.skip != true && question.review != true && question.answered != true">

Upvotes: 2

user3145373 ツ
user3145373 ツ

Reputation: 8156

You can do something like below:

<li *ngFor="let item of menuViews">
        // This will used for internal links which does not have http
    <template [ngIf]="item.url.indexOf('http') == -1">
        <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
        <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span>
        </a>            
    </template>
    // This will used for external links which have http or https and url value is set in href so hover problem also be resolved
    <template [ngIf]="item.url.indexOf('http') != -1">
        <a class="ripple-effect" href="{{item.url}}" *ngIf="isUserLoggedIn == true" >             
        <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span>
        </a>            
    </template>
</li>

Let me know this works or not as per your requirement.

good luck

Upvotes: 2

The Hungry Dictator
The Hungry Dictator

Reputation: 3484

As far as i got your issue i suggest this thing to perform

in HTML 

<li *ngFor="let item of menuViews">

     //just remove your href from <a> tag and use (click) event

     <a class="ripple-effect" (click)="onClick($event)" 
        *ngIf="isUserLoggedIn == true" >             
        <span class="media-body media-middle" 
           *ngIf="isUserLoggedIn == true">{{item.name}}
        </span>
     </a>            
</li>

And in TS file 

onClick(event){
    //Your other code lies here
     if (item.url.indexOf("http://") == -1 && item.url.indexOf("https://") == -1) {
          //set value in [routerLink]
      } else {
          //set value in href
      }
    //Your other code lies here
}

Upvotes: 0

Related Questions