I want to check if a user is signed on Angular

my view.ts

import {
  Component,
  OnInit,
  ViewChild,
  ElementRef,
  AfterViewInit,
  HostListener,
  Input
} from '@angular/core';
import { INavData } from "../../Models/navItem.model";

@Component({
  selector: 'app-home-navbar',
  templateUrl: './home-navbar.component.html',
  styleUrls: ['./home-navbar.component.scss'],
})
export class HomeNavbarComponent implements OnInit {
  user: any;

  isScrolled = false;

  constructor() {}

  @HostListener('window: scroll')
  onWindowScroll() {
    const scrollPosition = window.pageYOffset;
    if (scrollPosition >= 100) {
      this.isScrolled = true;
    } else {
      this.isScrolled = false;
    }
  }
  ngOnInit(): void {}
}

my navbar.ts

export interface INavAttributes {

}
export interface INavWrapper {
  attributes: INavAttributes;
  element: string;
}
export interface INavBadge {
  text: string;
  variant: string;
  class?: string;
}
export interface INavLabel {
  class?: string;
  variant: string;
}
export interface User {
  email: string;
  id: number;
}
export interface INavLinkProps {
  queryParams?: {
      [k: string]: any;
  };
  fragment?: string;
  queryParamsHandling?: 'merge' | 'preserve' | '';
  preserveFragment?: boolean;
  skipLocationChange?: boolean;
  replaceUrl?: boolean;
  state?: {
      [k: string]: any;
  };
  routerLinkActiveOptions?: {
      exact: boolean;
  };
  routerLinkActive?: string | string[];
}

export interface INavData {
  user?: User;
  name?: string;
  role?: string;
  url?: string | any[];
  href?: string;
  icon?: string;
  badge?: INavBadge;
  title?: boolean;
  children?: INavData[];
  variant?: string;
  attributes?: INavAttributes;
  divider?: boolean;
  class?: string;
  label?: INavLabel;
  wrapper?: INavWrapper;
  linkProps?: INavLinkProps;
}

i am trying to import my navbar component to use for checking, but i'm pretty new to angular. any solution?

Comments

[Joel Lau]

Hi James,

When sharing data between components, you often are limited to a few options:

1. passing a reference to said component
2. using a service

Since its likely that you'd want to reference user information and login states throughout your app, I'd highly recommend the latter.

Let me know if you need more help!

[James Osho Thomas]

let's say i make a service, how then do i input my user auth from my example?
I'm sorry i'm very new to this.

[Joel Lau]

no worries, here are some articles that will probably do a better job of explaining than I do:

Methods of passing data between components:

• fireship.io/lessons/sharing-data-b...
• medium.com/weekly-webtips/how-to-p...

Using a service to pass data between components:

• stackoverflow.com/questions/528315...

[Joel Lau]

short answer:

• move variables concerning user auth data into a service

example:

• stackoverflow.com/questions/537713...