There are multiple ways to do this.
One is: wait until you load the config file and then *redirect to *a url
that will render the appropriate components. You might use router, or even
multiple router outlets for all that. E.g. let's say your base route is
something like /treeview.
So you read the config, the config says "render dropdown1 with param
someParam, render dropdown2 with range 1-5, render treeview on path
/path/to/file and show table with results from id=35, load 20 results for
that grid.
Meaning, after you get the config, and then change the app state -> which
is done by changing the url -> which is done by calling router.navigate.
And your resulting app state, or url, looks like this:
/treeview;dropdown1=someParam;dropdown2=1-5;treeview=%2Fpath%2Fto%2Ffile;tableId=35;tableLimit=20
(I've url-encoded the treview path there).
But how would the code look for this? In my example above, all route params
are optional, so something like this for route config:
RouterModule.forChild([{ path: 'treeview', component: TreeViewComponent }]);
And your TreeViewComponent would than simply listen to param changes and
respond, something like this:
class TreeViewComponent {
constructor(private activatedRoute: ActivatedRoute, private router:
Router, private myConfigService: MyConfigService) { }
ngOnInit() {
// First, get ready for parameters change
this.activatedRoute.params.subscribe((params: any) => {
if (params.dropdown1) {
this.dropdown1 = params.dropdown1;
this.doSomethingForDropdown1(params.dropdown1);
}
if (params.dropdown2) {
this.dropDown2range = parseThatRangeSomehow(params.dropdown2);
..
}
...
});
// And now actually get that config and respond to it
this.myConfigService.getConfig()
.subscribe((config: MyConfig) => {
this.router.navigate('treeview', config.dropdown1,
config.dropdown2, config.treeview, config.tableId, config.tableLimit);
});
}
...
}
And finally, how to deal with rendering? Again, multiple paths. One way to
have it done is, like you've said, *ngIf. Another is, actually put all
those elements into their own subcomponents
<section class="treeview" *ngIf="treeview">
<treeview-component [treeviewPath]="treeview"></treeview-component>
</section>
<section class="dropdown1">
<dropdown1></dropdown1>
</section>
<section class="dropdown2">
<!-- or inline it, like this -->
<select something>
<option *ngFor="let option of dropDown2range"
value="option.something">{{ option.whatever }}</option>
</select>
</section>
....
Or this component might have <router-outlet> of its own instead. Or maybe
some of it is static, you just need the param to load the treeview, and the
other stuff is dynamic, like those dropdowns, that might oir might not be
shown.
Again, this is just very random, vague bunch of ideas, and the actual
implementation depends a lot on what exactly you need to do and which are
your use cases, and which params are mandatory etc.
On Thursday, July 13, 2017 at 5:04:17 PM UTC+2, Reza Razavipour wrote:
>
> I have an app that should display nothing on the page until a config file
> has been read.
> Once the config file is read, the list of components that should be
> displayed is determined.
> This will impact the layout of the page also...
>
> Generally speaking, how would the ng directives, (*ngIf, etc..) look like
> in the app and component htmls?
>
> I have attached a simplified version of my app.
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
