Transfer an Object from the LoginComponent to the ProfilComponent

Question

Transfer an Object from the LoginComponent to the ProfilComponent

Beginning with Angular, I am curious about the process of passing an object (connectedUser) from the LoginComponent to the ProfileComponent.

Your help is greatly appreciated. Thank you in advance.

angular typescript

Answer 1

Answer №1

Here is a different approach to try:

create Class RegistrationComponent {
userData = {}

}

within the HTML template :

<app-registration-component [info]="userData"></app-registration-component>

inside the registration Component :

create class RegistrationComponent {
@input() info : any; // Data is received here 

}

Answer 2

Here is a different approach to try:

create Class RegistrationComponent {
userData = {}

}

within the HTML template :

<app-registration-component [info]="userData"></app-registration-component>

inside the registration Component :

create class RegistrationComponent {
@input() info : any; // Data is received here 

}

Answer 3

Answer №2

If you're looking for a way to implement this functionality, here's one approach you can take. Start by creating a service called AppStateService (in app-state.service.ts) that will hold and share an object. Feel free to use the code snippet below as a reference:

Here is the content of app-state.service.ts file:

@Injectable({
  providedIn: 'root',
})
export class AppStateService {
  private _connectedUser: any = undefined;

  public get connectedUser(): any {
    return this._connectedUser;
  }
  public set connectedUser(value: any) {
    this._connectedUser = value;
  }
}

Within your login.component.ts file, you can access the AppStateService like this:

constructor(private appState: AppStateService) { }

public onLoggedin(): void {
  this.authService.login(username, password).subscribe(res => {
    this.appState.connectedUser = res.data;
  });
}

In your profile.component.ts file, retrieve the connected user information using the following code:

public connectedUser;

constructor(private appState: AppStateService) { }

ngOnInit(): void {
  this.connectedUser = this.appState.connectedUser;
  console.log('I:--START--:--ProfileComponent OnLoad--:connectedUser/', connectedUser);
}

Answer 4

If you're looking for a way to implement this functionality, here's one approach you can take. Start by creating a service called AppStateService (in app-state.service.ts) that will hold and share an object. Feel free to use the code snippet below as a reference:

Here is the content of app-state.service.ts file:

@Injectable({
  providedIn: 'root',
})
export class AppStateService {
  private _connectedUser: any = undefined;

  public get connectedUser(): any {
    return this._connectedUser;
  }
  public set connectedUser(value: any) {
    this._connectedUser = value;
  }
}

Within your login.component.ts file, you can access the AppStateService like this:

constructor(private appState: AppStateService) { }

public onLoggedin(): void {
  this.authService.login(username, password).subscribe(res => {
    this.appState.connectedUser = res.data;
  });
}

In your profile.component.ts file, retrieve the connected user information using the following code:

public connectedUser;

constructor(private appState: AppStateService) { }

ngOnInit(): void {
  this.connectedUser = this.appState.connectedUser;
  console.log('I:--START--:--ProfileComponent OnLoad--:connectedUser/', connectedUser);
}

Transfer an Object from the LoginComponent to the ProfilComponent

Answer №1

Answer №2

Similar questions

How to extract a date from Mat-Datepicker without using moment library

Exploring Angular 6 with Universal Karma for effective module testing

Enhancing Angular2 performance when managing a large number of input elements with two-way binding

POST requests in Angular Universal are making use of the IP address assigned to my server

Selecting only the month and year with the v-date-picker

Steps for adjusting the status of an interface key to required or optional in a dynamic manner

A guide on retrieving the index of an element within a nested array

Bring in TypeScript property from an external scope into the current scope

Detecting the check status of a checkbox in react native: a complete guide

Utilizing SVG Images on Buttons within Material Design (MD-Icon)

Using TypeScript to define parameter types to update an object's key and value

Tips for separating provider and input components with React Hook Form

Tips for utilizing the onClick handler when mapping through items in React

Executing the ngIf directive in Angular 2 when a function or click event occurs

Guide to making an array of objects reactively with formControlName

The URL "http://localhost:8100" has been restricted by the CORS policy, as it lacks the necessary 'Access-Control-Allow-Origin' header on the requested resource

Encountering an "Offset exceeds DataView bounds" error while trying to load an .STL model in Angular 9

I seem to be stuck in an endless cycle with React hooks and I can't figure out the root cause

Required attributes not found for data type in TypeScript

Properly segmenting sections into components in Angular