If you're looking to understand how a certain code works, I can provide you with a snippet from one of my previous projects:
Explaining ComponentViewRightMode Class : This specific class is designed to determine the user's rights based on the URL using the ApplicationService and relying on the Router.
export class ComponentViewRightMode {
private _routerReference: Router;
private _applicationsServiceReference: ApplicationsService;
viewRight: string;
constructor(
router: Router,
applicationsService: ApplicationsService
) {
this._routerReference = router;
this._applicationsServiceReference = applicationsService;
this.getCurrentUserViewRight();
}
getCurrentUserViewRight() {
this.viewRight = this._applicationsServiceReference.currentViewReadMode(this._routerReference.url);
}
}
Understanding StockComponent Class : Pay attention to how dependencies are injected using super().
export class StockComponent extends ComponentViewRightMode implements OnInit {
constructor(
private router: Router,
private applicationsService: ApplicationsService,
...
) {
super(router, applicationsService);
}
}
In essence, my goal was to share the viewRight property across multiple components by utilizing the method described above. Due to the property being set in the constructor of the parent Class, all the child components could access it asynchronously through my services.
This enables me to utilize the property in my templates effectively, as shown below:
Example of StockComponent Template :
<div class="stock-actions">
>>>>> This is where the viewRight property comes into play <<<<<
<button [disabled]="viewRight !== 'Write'" md-raised-button (click)="navigateTo('someURL')">
{{'STOCK.EQUIPMENT_ADD'|translate}}
</button>
...
</div>
I hope this practical demonstration assists you in gaining a better understanding.