CODEWITHSUNDEEP
angular
xmisd
xmisd

Reputation: 390

Show a component if the application is ran for the first time in Angular 2?

I am just learning Angular 2 (rc.4) so please bear with me. I have an application which needs to store the users info. So when the user runs the application for the first time, a specific component should be shown based on the data in a config.json file.

Currently I am doing this like so:

AppComponent

<div *ngIf="!data.user">
  <first-run-component
</div>

<div *ngIf="data.user">
  <main-component></main-component>
</div>

export class AppComponent implements OnInit{
 public data;

 constructor(private userDataService : UserDataService){}    

 ngOnInit(){
  this.getUserData();
 }

 getUserData(){
     this.userDataService.getUserData()
                     .subscribe(
                      data => this.data =data);
 }
}

Now in the UserDataService I just return an observable with http.get, but this happens asynchronously, so I was wondering if this was the right approach?

This works just fine,we are shown the first-run component (or the main-component if the data already exists in the file) and there the user types in his info and the main-component should be shown.

What is the best approach for this or how would you design the structure for this type of application in angular 2?

Upvotes: 1

Views: 3938

Answers (1)

Alex Beugnet
Alex Beugnet

Reputation: 4071

I guess you'd need a router to do this kind of job.

As you are using RC4, you won't have to setup and configure the RC5 NgModule along with it. Be careful, the syntax might not be the same.

Understanding the router

Here is the link to the tutorial so you can understand how it works : https://angular.io/docs/ts/latest/guide/router.html.

And here the link to the guide to understand the whole thing and make what you need : https://angular.io/docs/ts/latest/guide/router.html

Basically, a router works with a router-outlet. It's where a component is rendered based on a specific Url route. Let's say you have the following structure (without any *ngIf or anything) :

<first-run-component></first-run-component>
<router-outlet></router-outlet>

Your first-run component will always be loaded, and your router-outlet can then load any component linked to a specific route. Consider the following routing : 

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes', component: HeroListComponent }
];

You can then switch between these two component by telling the router to navigate to any of these two routes, while your first-component will always be there as well.

To fully answer your question, I would go with a component that contains a single router-outlet and then manage the route to choose depending on the "data.user".

You need :

  • To create a app.routes.ts file that contains the possible routes to your router.
  • To make the routes available to your whole application when you bootstrap().
  • To manage the cases to know when to navigate to a component based on your user.data.

Be careful to not get lost with the NgModules configurations that are shown on the documentation (example of RC5 specific :)

export const routing = RouterModule.forRoot(appRoutes);

Also, you can manage (if you need) default component loading by redirecting to a component if the path contains a specific URL like so :

export const LoginRoutes: Routes = [
    // if Url is empty after http://localhost:8000/ redirect to http://localhost:8000/login
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    // if http://localhost:8000/login => load LoginComponent
    { path: 'login', component: LoginComponent },
    // if http://localhost:8000/recup => load RecupComponent 
    { path: 'recup', component: RecupComponent }
];

Also, don't forget to use Dependency Injection if you need to use the router in a component using :

import { Router, ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    templateUrl: 'XXX',
    styleUrls: ['XXX'
    ],
    directives: [
        ROUTER_DIRECTIVES
    ]
})

...

constructor(public authService: AuthService, public router: Router) {

}

And you will be able to navigate like so (giving a full example using a service for example) :

login(username, password) {
    // Service that manages the authenticated state
    this.authService.login(username, password)
        .subscribe(() => {
            // Call the service
            if (this.authService.isLoggedIn) {
                // Redirect the user to master component
                this.router.navigate(['/master/accueil']); // Using a second <router-outlet> to manage a different route
            }
        });
}

Hope this helps. My advice though, you should upgrade to RC5.

Upvotes: 4

Related Questions