Essentially, I have two types of users: Teachers and Students. How can I display different profile screens depending on the user type?
The Sidemenu is located in app.components.ts file.
Essentially, I have two types of users: Teachers and Students. How can I display different profile screens depending on the user type?
The Sidemenu is located in app.components.ts file.
When looking to navigate to specific pages,
You have options like using the router.navigate function from the component or utilizing routerLink directly in the HTML.
To organize our files, we will create separate directories for teachers and students, each with their components, CSS, and HTML files.
Step 1) The routing for these components needs to be added to the app-module.routings.ts file, which should be manually created within the app folder of your application
import { TeacherComponent } from './teacher/teacher.component';
import { StudentComponent } from './student/student.component';
const routes: Routes = [
{ path: '', redirectTo: '/teacher', pathMatch: 'full' },
{ path: 'teacher', component: TeacherComponent },
{ path: 'student', component: StudentComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
Step 2) Implementing the navigation logic
export class AppComponent {
name = 'Changing the navigation';
currentPage = 'teacher';
constructor(private router: Router){}
navigatePageTo(page) {
this.currentPage = page;
this.router.navigate([page]);
}
}
Step 3) Adding the relevant links
<div class="sidenav">
<a (click)="navigatePageTo('teacher')" [class.activeLink]="currentPage === 'teacher'">Teacher</a>
<a (click)="navigatePageTo('student')" [class.activeLink]="currentPage === 'student'">Student</a>
</div>
<div class="main-content">
<h1>{{name}}</h1>
<hr>
</div>
<router-outlet></router-outlet>
You can view the Demo Here
I hope this meets your expectations.
Can the features of "mapped types" and "union types" be combined to generate an expression that accepts the specified interface as input: interface AwaActionTypes { CLICKLEFT: 'CL'; CLICKRIGHT: 'CR'; SCROLL: 'S'; ZOOM ...
// backend/server.ts import express, { Application, Request, Response } from 'express'; import mongoose from 'mongoose'; import cors from 'cors'; import dotenv from 'dotenv'; const multer = require('multer&apos ...
Currently experimenting with various frameworks for hybrid mobile development. Although I lean towards React Native over Angular, I am really impressed by the Injector and Provider mechanisms in Angular. The ability to have a single instance of a class cou ...
Hey there! I'm currently utilizing the compressorjs plugin for compressing images, but I'm encountering an issue when selecting images. You can find out more about the plugin here. Here is my code snippet: window.resolveLocalFileSystemURL( ...
I've been working on setting up SideEffect for my authentication store, but every time I trigger the action (TrySignIn), I keep encountering this error: "AuthEffects.authSignin" dispatched an invalid action ERROR TypeError: Actions must hav ...
I have encountered an issue while attempting to use @Input with a list of objects, where the @Input variable ends up being undefined. What is functioning properly can be seen in home.component.html: <p> <it-easy [mycount]="countItem" (result ...
This is the service provided. existWayBillByRsBillNumber(billNumber: string){ return this.http.get<boolean>(this.baseUrl + 'Common/ExistWayBillByRsBillNumber/'+billNumber); } This is how the service call is made. this.commonServic ...
In order to customize the Angular Material select component (https://material.angular.io/components/select/overview) to have an input field transformed into an icon button, I attempted to override its styling. While this approach worked well for me, I came ...
Currently working with Angular 17, I have a straightforward decorator that wraps the target with Proxy and a basic Angular component: function proxyDecorator(target: any) { return new Proxy(target, { construct(target: any, argArray: any[], newTarget: ...
I'm a newcomer to Next.js and TypeScript and I can't seem to find any helpful resources on resolving this particular issue: import Image from 'next/image'; export default function Item({ image }) { // <-- parameter image needs a &ap ...
My goal is to merge two arrays into one using the spread object method as shown in the code snippet below: const queryVariable = { ...this.state, filters: [...Object.keys(extraFilters || {}), ...this.state.filters], } The this.state.filte ...
I have been exploring ways to retrieve data from an array of values instead of a single value when using [(ngModel)] binding in my Angular 2 application. The current setup functions perfectly with a single value, as shown below. The data is pulled from the ...
Is it necessary to include the typings folder as part of an asp.net application in Visual Studio 2015 when using typings? I would like to handle the typings folder similar to the bower_components folder - not checking it and not including it in my solutio ...
I'm currently experimenting with Angular 4 and facing an issue with returning a boolean value from the Auth Service. Strangely, when I attempt to log the value, it shows up as undefined. My goal is to retrieve the boolean value and then utilize it in ...
Any assistance with this matter would be greatly appreciated. I am in the process of constructing an Angular 5 project using angular/cli. The majority of the project has been built without any issues regarding the build or serve commands. However, when a ...
While attempting to deploy my NestJs server on a C-Panel hosting, I have encountered an issue. Despite properly installing all node_modules and ensuring every project file is in place, the server fails to start and continuously displays the following error ...
I am working on a NextJS application that utilizes axios for making requests to a backend API, which requires an authentication token. To handle this, I have implemented a function that retrieves the auth token and stores it in a variable at the module-lev ...
How can I debounce the onInputChange function within the MyAutocomplete component? export interface AutocompleteProps<V extends FieldValues> { onInputChange: UseAutocompleteProps<UserOrEmail, true, false, false>['onInputChange']; } ...
Within my app-routing.module file, I have set up child routes along with an empty route for the default login page and a '**' route for handling 404 errors. Below is the code snippet: const routes: Routes = [ { path: 'dashboard' ...
I am facing an issue with my todo list app where I want to apply a line-through style to a specific item only, but currently, the line-through is being applied to all the items in the list instead of just the one I clicked on. HTML <input type="te ...