I need some help with writing an *ngIf else statement using a ternary expression. My goal is to have the logo's href lead to one URL if a user is logged in, and another URL if they are not logged in.
Here is the link to my code on StackBlitz
Thank you!
Utilize ternary statements within templates in the following manner:
<a [href]="auth.loggedInUser ? 'http://userLogged' : 'http://userNotLogged'">
To enhance the functionality of your login process, I made some modifications to your code:
// app.component.ts
export class AppComponent {
name = 'Angular ' + VERSION.major;
public auth: any = { loggedInUser: false };
}
// app.component.html
<a *ngIf="!auth.loggedInUser">
<img id="nav-logo"
src="https://icm.aexp-static.com/shopamex/img/global-images/Parks_3.jpg"/>
</a>
However, for a more straightforward login procedure, consider the following implementation:
import { Component } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
public auth: { loggedInUser: boolean };
public constructor(protected authService: AuthService) {
let login$: Observable<boolean> = this.authService.Login();
let sub: Subscription = login$.subscribe((success:boolean) => {
this.auth.loggedInUser = success;
});
}
}
I've been grappling with this code snippet for a while now. It was originally written in JavaScript a few months back, but recently I decided to delve into TypeScript. However, I'm struggling to understand how data types are properly defined in T ...
I am currently utilizing the Ace editor and would like to remove the shadowed line where the cursor is located. Here's an example Even after experimenting with different themes provided by Ace Mode Creator, the shadowed line still persists. Any sug ...
I've encountered an issue when sending data from Angular to Laravel. Using the get method works fine without any errors, but when I try to use the post method, I receive an error related to the 'Access-Control-Allow-Origin' header. Could t ...
THE ISSUE I am facing a challenge in my Angular project where I need to create a configuration service. The service needs to perform the following tasks: Retrieve all predefined parameters from the "environment" file Fetch any additi ...
The Angular Material Documentation center's component-category-list imports the RouterModule, yet it does not define any routes or reexport the RouterModule. Is there a necessity for importing the RouterModule in this scenario? ...
I have this snippet of code in my HTML file: <ion-datetime [(ngModel)]="time" formControlName="time" displayFormat="hh:mm a"></ion-datetime> I am trying to populate the ion datetime element with data retrieved from the server. The response fr ...
I currently have two functions in my ChartJS instance for handling click events. The first function works well for accessing component variables. onClick: () => { console.log(this.test); }, However, I am now facing an issue where I need to retri ...
After using currentDate = new Date(); in my typescript file and attempting to display it with {{currentDate}}, the full format appeared as Sun Aug 06 2017 15:36:11 GMT+0530 (IST). Referring to AngularDatePipe, I changed it to {{currentDate | date}}, resul ...
I'm encountering an issue with Angular when trying to use mdIcon in my code. Here is the snippet that's causing trouble: import {Component} from '@angular/core'; import {MdIcon} from '@angular2-material/icon'; @Component({ ...
I'm currently working on a project that involves Spring 5 with Spring Security and Angular 7. I am facing an issue while trying to connect the frontend, receiving the following error message. It's worth mentioning that the backend and frontend pr ...
My goal is to populate a table with data retrieved from my backend API. The table requires an input called rows, which should be an array of objects. Each object represents a row in the table and contains key-value pairs for column names and values. The ba ...
I have a website built with Angular 5 that utilizes routing. Within my code branch, there is a folder containing sections with various data. My goal is to display the required sections on a main page. I have achieved this, but encountered an issue where ...
I've been encountering an issue with importing material. Despite using code similar to the examples on material.angular.io, I keep running into the ""inject() must be called from an injection context..." error. My goal is to create a simple table ...
As I embark on the journey of upgrading my Angular 8 application to Angular 17, I am facing challenges related to ngModel binding and PrimeNG components. The architecture of my application follows a module-based structure, with app.module.ts serving as the ...
I am currently working on a loop to display inputs, and I would like to be able to add focus to the first input element when it is clicked. Does anyone have any suggestions on how I can select that first element and set autofocus on it? ...
Hello everyone! I am excited to be diving into the world of html and css, as I have a course lined up for next month. However, I currently have a project that I need to tackle on my own. One issue I'm facing is keeping the products within the screen s ...
I'm facing a challenge in my Angular application where I want to implement virtual scroll. The items displayed on the list are the outcome of a remote paged search. My goal is to fetch more results (trigger the next page) every time I scroll down to t ...
Currently, I am experiencing an issue in Angular Version 5 where the Angular Material Table collapses when rendering more than 20 columns. Here is a snapshot of what my table looks like: https://i.stack.imgur.com/MXfvQ.png https://i.stack.imgur.com/XHWgq ...
I have a PrimeNG Table with only one editable column called "Value". Here is the StackBlitz demo for reference. https://stackblitz.com/edit/datatablevalidation In the "Value" column, I need to implement validation based on the value in the corresponding ...
Lately, I've been delving into TypeScript through research and simple "hello world" projects. However, I've hit a roadblock when it comes to using System.js with TypeScript that I just can't seem to overcome. Most tutorials and demos online ...