AngWorkspace

This project was generated with Angular CLI version 17.3.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Whats included?

The library inludes the following components.

1. DSAppService

How to use the service import the service

import { DSAppService } from  'ngx-ds-core';

use it in a component you want to send httprequest to. Below we have an example using the service to login.

constructor(
    private appService: DSAppService,
) { }

 async onSubmit(): Promise<void> {
    if (this.signInForm.valid) {
      const login = await this.appService.postItem<LoginDto>(
        `${environment.restBaseUrl}auth/login`,
        this.signInForm.value,
        false,
        false
      );
      if (login?.accessToken) {
        this.profileService.changeProfile(login);
        this.router.navigateByUrl('/customer');
      } else if (login?.redirectUrl) {
        this.appService.onMessageService.next({
          severity: 'secondary',
          summary: 'Reset Password',
          detail: 'Your password has expired, please insert a new password',
        });
        this.router.navigateByUrl(login.redirectUrl);
      } else {
        this.appService.onMessageService.next({
          severity: 'error',
          summary: 'Wrong Credentials',
          detail: 'User not found or your password is incorrect',
        });
      }
    } else {
    }
  }

In app.component.ts you should subscribe for the subject appService.onMessageService

constructor(
    private appService: DSAppService,
  ) {}

  ngOnInit() {
    // subscribe to message service
    this.appService.onMessageService.subscribe((message: Message) => {
        // the example below uses primeng message service. It will show a toast. 
        // you can replace it with your own message service. 
      this.messageService.add(message);
    });
  }
}

2. AuthInterceptor

The interceptor adds in each http request a bearer token. The interceptor looks for the token in localstorage with the key 'user'. The object saved with the 'user' key must have the jwt token named 'accessToken'

{
"accessToken": "jdfklasdjf...",
...
}

How to use the Auth Interceptor. import the interceptor

import { AuthInterceptor } from  'ngx-ds-core';

add it to providers (usually you want to add it to app.module.ts)

  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  ],

3. AuthGuard

This components protects the endpoints from being access if the user is not loggedin. AuthGuard checks in localstorage for the user object stored with the key 'user'. If the value for the key 'user' is null or undefined the authguard will trigger a redirect to the route 'auth/login' , otherwise will let the user to access the resource.

How to use it? import authguard.

import { authGuard } from  'ngx-ds-core';

protect the routes that you want.

export const routes: Routes = [
  {
    path: 'auth',
    component: BlankLayoutComponent,
    children: [
      {
        path: '',
        loadChildren: () => import('./pages/auth/auth.module').then(m => m.AuthModule),
      },
    ],
  },
  {
    path: 'overview',
    component: FullLayoutComponent,
    canActivate: [authGuard],
    children: [{ path: '', component: CustomerComponent }],
  },
 ]

4. Pipes

DateAgo Pipe. import the pipe

import { DateAgoPipe } from  'ngx-ds-core';

use it whenever you want to transform a date into a how long ago text compared to the actual date. this is an example how to use it.

<td>{{ tableData.updatedAt | dateAgo }}</td>

5. Global Functions

markFormGroupTouched(formGroup: FormGroup). Use this function when the form is not valid. This function will emphasise on the input that are not valid. This function will get called in case theres a nested form inside the formgroup.

/**
 * Marks all controls in a form group as touched
 * @param formGroup - The form group to touch
 */
export function markFormGroupTouched(formGroup: FormGroup) {
  Object.values(formGroup.controls).forEach(control => {
    if (control instanceof FormGroup) {
      markFormGroupTouched(control);
    } else if (control instanceof FormControl) {
      if (control.invalid) {
        control.markAsDirty();
        control.updateValueAndValidity({ onlySelf: true });
      }
    }
  });
}