How to pass a value to index.html from component in angular 2

Question

I have an angular2 project where index.html contains header bar. Other components will take care of logging in and displaying other stuff.

I have to show a logo in header bar which is present in index.html only if the user loggedIn. I'm setting a flag in app.component.ts if the user logged in. How to refer that flag in index.html?

<body>
    <div class="content-body">
        <header class="header">
            <div class="header-bar container">
                <div class="header-bar__main">
                    <div class="header-heading">
                        <h1 class="page-title">noHold Application</h1>
                    </div>
                </div>
                <a class="btn btn--small btn--icon ng-scope" title="Logout"><span class="icon-sign-out"></span></a> // this line should be displayed only if user logs in.
            </div>
        </header>
        <div class="content">
            <div class="content__main">
                <div class="container">
                    <app-root>Loading... </app-root>        
                </div>
            </div>
        </div>
    </div>

</body>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  static loggedIn = false;

  getLoggedIn() {
    return AppComponent.loggedIn;
  }

}

Burak Tasci · Accepted Answer · 2017-03-21 10:42:32Z

In Angular, it's a best practice to have one single bootstrap component (AppComponent in many cases, as well as in your case), and define other components (such as header, menu's, page content, login status, etc).

In this case, I suggest you to modify your app.component.html, and introduce child components using their own selectors. For instance:

app.component.html

<header></header>
<router-outlet></router-outlet>

Contents of HeaderComponent are rendered using the header tag/selector whereas contents of navigated components (ex: AboutComponent) are rendered using the router-outlet tag/selector.

header.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  public loggedIn = false;

  ...
}

header.component.html

  <header class="header">
    <div class="header-bar container">
      <div class="header-bar__main">
        <div class="header-heading">
          <h1 class="page-title">noHold Application</h1>
        </div>
      </div>
      <div *ngIf="loggedIn">
        <a class="btn btn--small btn--icon ng-scope" title="Logout"><span class="icon-sign-out"></span></a>
      </div>
    </div>
  </header>

Hope it's helpful.

gentiane · Accepted Answer · 2017-03-26 23:05:44Z

Take care to not couple your components. A component should not access properties of another component. There is many ways to decouple components. In your case a good choice could be to share common data between components.

Here is a quick example of implementation. Create a class that represents your user :

class User {
  firstName: string;
  lastName: string;
  ...
}

Create a class that contains your user's session state :

class Session {
  user: User;
  isLogged: boolean;

  login(user: User) {
    this.user = user;
    this.isLogged = true;
  }
}

Then your configure your application module to inject an instance of the Session class as a singleton :

@NgModule({
  ...
  providers: [
    ...
    { provide: 'session', useValue: new Session() },
    ...
  ],
  ...
})

Now in all your components, your can inject your session. An exemple in the login component that sets the user when he authenticates :

@Component({
  ...
})
class LoginComponent {
  constructor(private session: Session) {
  }

  private login() {
    let user = ....;  // Retrieve user from backend service...
    this.session.login(user);
  }
}

And you can also use the session in your templates :

<div *ngIf="session.isLogged">
  <a class="btn btn--small btn--icon ng-scope" title="Logout"><span class="icon-sign-out"></span></a>
</div>

Collectives™ on Stack Overflow

How to pass a value to index.html from component in angular 2

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related