Change template dynamically


#1

Hello Friends,
Iam relatively new to ionic 3 development.
My application have 2 instances or users.
one is parents and one is teachers.
both are using same application.
First, when ever the application firstly run user need ro select type and load user specified interface.
i have sidemenu navigation for the entire application.
simply when teacher load app then it shows only the navigation for relevant to the teachers and so on.
how it is possible…any technique


#2

Hello,
I can not say it generally. To many things depends on your needs. This is more like a generale idea.

If the content of your pages from teacher and parents komplettly differ, then I would prefer pages that are design for teacher or parent and load only this pages. Simply push needed page.

If the content is mostly the same but some compoents are only for exampe teachers, than you could make this with structural directivies like ngIf, etc. With structural direvties you can vary your page in many kinds,. The pages, how astonishing, gets more and more complex.

If ui is same but content is different, then I would load different datas to an array or something similar and let render this.

Or you use all of possibile technics depending to your specific needs.

Very generally, yes I know.

Best regards, anna-liebt


#3

i have already created side menu navigation for teachers side in app.component.ts using arrays and parent side is developed by my friend he also using sidemenu for the navigation.
Now we need to merge thease two by checking usertype.
This is our need more specifically.
Pls tell me a professional approach to doing this.


#4

Look at the ionic conference template

Use ionic start and select ionic conference

Also look at ionic preview app at github

Nice showcase of ui and techbiques


#5

Hello,

I hope I understand it right.

If you look to app.component.ts. There is something like rootPage: any = ‘HomePage’; This loads your mainpage.

If you look to app.html. This holds your html for your side menu.

In app.html, like any other component’ you can use any structural directive like ngIf, ngswitch, etc… to decide what should put in the dom.

If you want put all in the dom, but want hide it use [hidden]=‘whatever’ as property on an element.

Principal you can decide freely which element is the trigger, for example a button click, a changed variable that triggers the change, and what will be show after it is triggered. If maybe you want more fexibility with sidemenus you can create your self one or use another ui kit that have something like that for example primeng that has flexible sidebar and you implement one for teacher and one for parents.

Hope I understood you correct.

Best regards, anna-liebt


#6

Yes…i have implement that using *ngIf and arrays.
i am checking the user type and and setting a variable to true or false.
by using that iam load my arrays.
Thanks for your reply