Tips for effectively utilizing Angular's Custom Directive!

HTML CODE:

<li [routerLink]="['/admin']" *allowedUIAccess="'ADMIN'"
                [permissionSet]="(userprofile$ | async)?.permissions">
                Admin
            </li>

DIRECTIVE CODE:

@Directive({
  selector: '[allowedUIAccess]'
})
export class AllowedUIAccessDirective {

  @Input()
  permissionSet!: string[] | undefined;

  constructor(private elementRef: ElementRef,
    private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef,
    private uiService: UiService) {
  }

  @Input()
  set allowedUIAccess(condition: string) {
    console.log(condition);
    console.log(this.permissionSet);
  }

}

ERROR MESSAGE:

Error TS2322: Type '"(userprofile$ | async)?.permissions"' is not assignable to type 'string[] | undefined'.

Line 13: permissionSet="(userprofile$ | async)?.permissions">

I need help resolving this error, please point out where I am going wrong.

Answer №1

When dealing with the permissionSet attribute that gets its value from an observable, it's logical to create a setter for it:

  @Input()
  set permissionSet(permissions: string[] | undefined) {
    console.log(permissions);
  }

I also encountered a syntax error due to the asterisk in

*allowedUIAccess="'ADMIN'"
. Changing it to either of these options fixed the issue:

[allowedUIAccess]="'ADMIN'"

Or

allowedUIAccess="ADMIN"

After making these adjustments, everything functioned as expected.

If you want to see the code in action, feel free to check out this stackblitz.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the form field is double-clicked, it automatically populates with information, but unfortunately it does not meet the

Presented below is a formgroup configuration: this.order = new FormGroup({ City: new FormControl('', Validators.required), Street: new FormControl('', Validators.required), DateOfDelivery: new FormControl('', Vali ...

Angular2rc1's DynamicComponentLoader function LoadIntoLocation allows dynamic loading of components

Can someone explain how to utilize the LoadIntoLocation method in Angular2 rc 001? In DynamocComponentLoader, I have only encountered two methods: loadAsRoot and loadNextLocation. Any help would be appreciated. Thank you! ...

Sub-objects in Angular 2 with observables

I need guidance on understanding Observables/Subjects in Angular2. My app includes data of the following structure: sections = [ { _id: '999' name: 'section 1' items: [ { name: "i ...

Ways to divide numerical values in Angular?

I need to format a number in the input field which can be either 1000000 or 1000. The desired format is: 1 000 000 or 1 000, respectively. I attempted using a Pipe method but it didn't yield the expected result. What could be causing this issue? {{ ...

Angular 2 - The creation of cyclic dependencies is not allowed

Utilizing a custom XHRBackend class to globally capture 401 errors, I have encountered a dependency chain issue in my code. The hierarchy is as follows: Http -> customXHRBackend -> AuthService -> Http. How can this problem be resolved? export cla ...

Can TypeScript declaration doc comments be translated and displayed in hover info and suggestion descriptions in VS Code?

English is not my native language, so I am wondering if there are translated versions available for the boxes that appear when hovering over a declaration to provide descriptions/documentation. For instance, with the String.prototype.split() method: ...

Displaying information in a table using Angular, instead of displaying it directly from

I'm currently developing an Angular application that utilizes ngx-datatable for displaying data. In this case, I have a Supplier object that needs to be shown in a table using ngx-datatable, with some columns displaying object properties and others sh ...

Is SASS stylesheet supported by the Angular 2 Ahead-of-Time compiler?

Considering giving Angular 2 Ahead-of-Time compilation another shot. I'll have to do some significant refactoring since my current custom build process will need to be reworked. Prior to diving in, I'm curious: if I reference external .scss fil ...

When any part of the page is clicked, the data on the Angular page will automatically

Clicking the mouse anywhere on the page, even in a blank spot, causes the data array to resort itself. I understand that clicking may trigger a view change if an impure pipe is set, but I have not used one. So I am puzzled because my development testing ...

The power of absolute paths in React Native 0.72 with TypeScript

Hi everyone! I'm currently having some difficulty setting absolute paths in react native. I tried using babel-plugin-module-resolver, as well as configuring 'tsconfig.json' and 'babel.config.js' as shown below. Interestingly, VS Co ...

What is the best way to utilize Quokka when working with TypeScript files that have been imported?

After installing ts-node using NPM, I've spent countless hours trying to get it to work. Unfortunately, I couldn't find any helpful documentation on the website or through a Google search. I have installed ts-node both globally and in my project ...

Unable to assign to 'options' as it is not recognized as a valid property of 'p-multiSelect'

I am currently in the process of incorporating the datatable filter from primeng into my project. Here is the code snippet I have written: <p-column field="time" header="Time" [filter]="true" filterPlaceholder="&#xf0b0;"> <ng-template pTe ...

Setting up angular-cli project for rc5- Step by step guide

Trying to integrate angular-cli with angular 2 rc5 but facing challenges: The issue of 'Promise' not being found After attempting to install 'npm install -g angular-cli@webpack', typings did not get installed, resulting in WebStorm un ...

The declaration file for the module 'styled-components/native' appears to be missing

When incorporating styled-components into your React Native application, a separate sub-directory is created for the native components: import styled from 'styled-components/native`; export const Container = styled.View` ... `; If you attempt to i ...

Learn how to navigate through the extensive file structure in Eclipse's Project Explorer after compiling the Angular 2 tutorial 'Tour of Heroes'

I am currently in the process of learning AngularJS 2 using the 'Tour of Heroes' tutorial with Typescript. Everything has been going well so far, but I have noticed something peculiar while working on this tutorial. After compiling with NodeJs, a ...

How can you utilize both defineProps with TypeScript and set default values in Vue 3 setup? (Typescript)

Is there a way to use TypeScript types and default values in the "defineProps" function? I'm having difficulty getting it to work. Code snippet: const props = defineProps<{ type?: string color?: 'color-primary' | 'color-danger&a ...

Unexpected behavior encountered with RxJs Subject.subscribe function

When calling the Subject.subscribe method, an error is output as follows: TypeError: Cannot read property '_subscribe' of undefined at BidirectionalSubject._subscribe (Rx.js:10239) at BidirectionalSubject._subscribe (Rx.js:10239) at Bidirection ...

Display the mdTooltip when clicked and keep it hidden until clicked again

I would like to disable the mouse-hover effect and activate mdTooltip on click, then deactivate it by clicking again. Is there a way to achieve this? I initially tried using the .toggle() method but realized that it was working in the opposite manner than ...

Stylish elements within a higher-order component in a React application

Encountering two problems when using styled components within a higher order component wrapper in react. The component is being rendered without the specified background color. Encountering TypeScript errors with the ComponentWithAddedColors. Unable to id ...

Unit testing in Angular ensures that a property is always defined and never undefined

I'm struggling to understand why this basic test isn't functioning properly. BannerComponent is not supposed to display a welcome message upon construction Expected 'welcome' to be undefined. // Component @Component({ selector: &ap ...