diff --git a/angular/src/directives/not-premium.directive.ts b/angular/src/directives/not-premium.directive.ts
new file mode 100644
index 0000000000..15a01f7146
--- /dev/null
+++ b/angular/src/directives/not-premium.directive.ts
@@ -0,0 +1,27 @@
+import { Directive, OnInit, TemplateRef, ViewContainerRef } from "@angular/core";
+
+import { StateService } from "jslib-common/abstractions/state.service";
+
+/**
+ * Hides the element if the user has premium.
+ */
+@Directive({
+  selector: "[appNotPremium]",
+})
+export class NotPremiumDirective implements OnInit {
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef,
+    private stateService: StateService
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    const premium = await this.stateService.getCanAccessPremium();
+
+    if (premium) {
+      this.viewContainer.clear();
+    } else {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+    }
+  }
+}
diff --git a/angular/src/directives/premium.directive.ts b/angular/src/directives/premium.directive.ts
new file mode 100644
index 0000000000..c403f5b9b6
--- /dev/null
+++ b/angular/src/directives/premium.directive.ts
@@ -0,0 +1,27 @@
+import { Directive, OnInit, TemplateRef, ViewContainerRef } from "@angular/core";
+
+import { StateService } from "jslib-common/abstractions/state.service";
+
+/**
+ * Only shows the element if the user has premium.
+ */
+@Directive({
+  selector: "[appPremium]",
+})
+export class PremiumDirective implements OnInit {
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef,
+    private stateService: StateService
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    const premium = await this.stateService.getCanAccessPremium();
+
+    if (premium) {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+    } else {
+      this.viewContainer.clear();
+    }
+  }
+}