Hide feature from Angular UI with ABP Framework

Question

I've created several features in the ABP Framework but now I want to hide a button in the Angular font-end UI when the option is disables.

I've found this code for C# code:

public class ReportingAppService : ApplicationService, IReportingAppService
{
    private readonly IFeatureChecker _featureChecker;

    public ReportingAppService(IFeatureChecker featureChecker)
    {
        _featureChecker = featureChecker;
    }

    public async Task<PdfReportResultDto> GetPdfReportAsync()
    {
        if (await _featureChecker.IsEnabledAsync("MyApp.PdfReporting"))
        {
            //TODO...
        }
        else
        {
            //TODO...   
        }
    }
}

But no equal code for the Angular UI.

Finaly it must be like this:

<button *ngIf="featureChecker.IsEnabled('MyApp.PdfReporting')">Download PDF</button>

Answer 1

You can use this code:

// Global variable
feature = false;

constructor(
    private oAuthService: OAuthService, 
    private authService: AuthService,
    private configStateService: ConfigStateService
) { }

ngOnInit(): void {
    this.feature = this.configStateService.getFeature('MyApp.PdfReporting') === 'true';
}

It returns a string but wen using a ToggleStringValueType for the feature it's always 'true' or 'false'.

Inside the HTML you can use this code:

<button *ngIf="feature">Download PDF</button>