Skip to content

@sw-code SWCode

urbo-feature-app-feedback 1.0.0-10184

Install from the command line:
Learn more about npm packages
$ npm install @sw-code/urbo-feature-app-feedback@1.0.0-10184
Install via package.json:
"@sw-code/urbo-feature-app-feedback": "1.0.0-10184"

About this version

Feature App Feedback

This library provides a feature for collecting app feedback from users. It includes components for general feedback and issue reporting.

Features

  • General app feedback collection
  • Issue reporting
  • Modular design for extending with custom feedback components

Usage

Import the FeatureAppFeedbackModule in your application:

import { FeatureAppFeedbackModule } from '@sw-code/feature-app-feedback';

@NgModule({
  imports: [
    FeatureAppFeedbackModule.forRoot(),
    // ...
  ],
})
export class AppModule {}

Extending with Custom Feedback Components

The app feedback feature supports injecting additional custom components. This allows other modules to add their own feedback options to the app feedback page.

Step 1: Create a Custom Feedback Component

Create a standalone component that will be displayed in the app feedback page:

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  CustomButtonColorScheme,
  CustomButtonType,
  CustomVerticalButtonComponent,
} from '@sw-code/urbo-ui';

@Component({
  selector: 'lib-custom-feedback',
  template: `
    <div class="flex-list-lines">
      <div class="header-section">Custom Feedback Component</div>
      <div class="subheader-section">This is a custom feedback component.</div>
    </div>
    <lib-custom-vertical-button
      [buttonType]="customButtonType.link"
      [colorScheme]="customButtonColorScheme.main"
      [routerLink]="['./custom-route']"
      [startIcon]="'arrow_forward'"
      [title]="'Custom Action'"
      class="custom-vertical-button"></lib-custom-vertical-button>
  `,
  styles: [
    `
      :host {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
      }
    `,
  ],
  imports: [RouterLink, CustomVerticalButtonComponent],
  standalone: true,
})
export class CustomFeedbackComponent {
  protected readonly customButtonColorScheme = CustomButtonColorScheme;
  protected readonly customButtonType = CustomButtonType;
}

Step 2: Register the Component

Register your component using the FEEDBACK_COMPONENTS injection token:

import { NgModule } from '@angular/core';
import { FEEDBACK_COMPONENTS } from '@sw-code/feature-app-feedback';
import { CustomFeedbackComponent } from './custom-feedback.component';

@NgModule({
  providers: [
    {
      provide: FEEDBACK_COMPONENTS,
      useValue: [
        {
          component: CustomFeedbackComponent,
          order: 10, // Lower numbers appear first
          id: 'custom-feedback-component', // Optional unique identifier
        },
      ],
      multi: true,
    },
  ],
})
export class CustomFeedbackModule {}

Step 3: Import Your Module

Import your module in your application:

import { NgModule } from '@angular/core';
import { FeatureAppFeedbackModule } from '@sw-code/feature-app-feedback';
import { CustomFeedbackModule } from './custom-feedback.module';

@NgModule({
  imports: [
    FeatureAppFeedbackModule.forRoot(),
    CustomFeedbackModule,
    // ...
  ],
})
export class AppModule {}

API Reference

Interfaces

FeedbackComponent

Interface for feedback components that can be injected into the app-feedback page.

interface FeedbackComponent {
  component: Type<unknown>; // The component type to be rendered
  order: number; // The order in which the component should be displayed
  id?: string; // Optional ID to identify the component
}

Injection Tokens

FEEDBACK_COMPONENTS

Injection token for providing additional feedback components.

const FEEDBACK_COMPONENTS: InjectionToken<FeedbackComponent[]>;

Services

FeedbackComponentsService

Service for registering and retrieving feedback components.

class FeedbackComponentsService {
  // Register a feedback component
  registerComponent(component: FeedbackComponent): void {}

  // Get all registered components
  getComponents(): FeedbackComponent[] {
    return [];
  }

  // Check if there are any registered components
  hasComponents(): boolean {
    return false;
  }

  // Remove a component by ID
  removeComponent(id: string): boolean {
    return false;
  }
}

Example

See the examples directory for a complete example of how to create and register a custom feedback component.

External Poll Component

The library includes a pre-built external poll component that links to a survey about the SoestApp design. To use this component, import the ExternalPollModule in your application:

import { ExternalPollModule } from '@sw-code/feature-app-feedback';

@NgModule({
  imports: [
    FeatureAppFeedbackModule.forRoot(),
    ExternalPollModule,
    // ...
  ],
})
export class AppModule {}

This will add a component to the app feedback page with:

The component is fully translated in both English and German.

Details

Assets

  • urbo-feature-app-feedback-1.0.0-10184.tgz

Download activity

  • Total downloads 9
  • Last 30 days 9
  • Last week 0
  • Today 0

Recent versions

View all