Questions tagged [angular-storybook]
131 questions
12
votes
2 answers
Angular Storybook - WebpackOptionsValidationError: Webpack has been initialised using a configuration object that does not match the API schema
I have updated angular from 11 to 12 and I have also updated all packages to the latest versions in my package.json:
{
"name": "poc-architecture-angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start":…
Andy88
- 647
- 2
- 9
- 21
12
votes
1 answer
How to properly import angular material components into StoryBook CSF
I have a relatively simple angular component that uses angular material components - mat-menu in particular.
When I create my story, I get a runtime error:
Error: Template parse errors:
Can't bind to 'matMenuTriggerFor' since it isn't a known…
Dave Vronay
- 625
- 7
- 22
10
votes
1 answer
Angular Storybook - prop knobs and ng-content
I'm building out an Angular app with Storybook. I want my stories to have controllable knobs, but some of these components take ng-content.
I'm having trouble getting these two to work together, because, from what I've found, passing content into a…
Sasha
- 6,224
- 10
- 55
- 102
10
votes
4 answers
NX - UI Library with Storybook and individually exported components
I'm exploring Nx with Angular (relatively new to both) and trying to figure out how to generate a component library that:
Can run Storybook, and
Can be imported one component at a time, rather than dragging the whole module/all the components into…
Sasha
- 6,224
- 10
- 55
- 102
10
votes
3 answers
How to configure storybook story for module with RouterLink
Cannot configure story for module where routerLink is used due to error
ERROR NullInjectorError: StaticInjectorError(DynamicModule)[RouterLinkActive -> Router]
To Reproduce
Steps to reproduce the behavior:
demo-app
Run app and you can test that…
Adam Michalski
- 1,722
- 1
- 17
- 38
9
votes
0 answers
Angular Storybook - Is there a way to generate .stories.ts files automatically
I'm looking to generate a .stories.ts file inside a component folder once we have run ng g component my-component.
The final result should look somehting like this:
my-component
-my-component.component.html
.
.
.
…
Ignacio Ambía
- 479
- 5
- 16
8
votes
1 answer
How to give a `TemplateRef` as an `@Input` arg to a Story?
I'm trying to make a Story that uses a component that takes a TemplateRef as an @Input. But I can't figure out how.
TestComponent
@Component({
selector: 'test',
templateUrl: './test.component.html',
})
export class TestComponent {
@Input()…
Snæbjørn
- 10,322
- 14
- 65
- 124
7
votes
0 answers
Migrating Storybook to 6.4 err: webpack < 5 used to include polyfills for node.js core modules by default
I have been following the multiple guides and troubleshooting online while migrating storybook to the newest version. I get this error:
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the…
user3353167
- 782
- 2
- 16
- 31
7
votes
0 answers
Angular Storybook Subscribe Output
How to subscribe to the component Output in Storybook for Angular?
For example, I have such component with its Output actions:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-task',
template:…
ame
- 773
- 9
- 21
6
votes
2 answers
Angular Material Styles Not Appearing in Storybook
I am trying to create a Storybook using the Angular Material library in an nx app but I can't get the styles to appear that come along with the library. So the component renders but there are no styles along with it. I've added the component to…
bschmitty
- 1,118
- 3
- 16
- 46
6
votes
3 answers
Angular 8 with Storybook 6
Getting the below error while installing and starting a storybook.
ERROR in /Users/username/angular-storybook/src/stories/Button.stories.ts
ERROR in /Users/username/angular-storybook/src/stories/Button.stories.ts(2,29):
TS2307: Cannot find module…
Subhakant Priyadarsan
- 320
- 1
- 13
6
votes
1 answer
How to add directives to angular storybook
I have a dropdown directive which I want to add to my storybook, its not working. When I run the button shows on the storybook but if I click on the button the template is not getting displayed.
import {moduleMetadata} from…
Subrata Banerjee
- 123
- 2
- 6
5
votes
1 answer
ngOnChanges not triggered in Angular when using controls in Storybook to change a value in a variable in a component
Im using storybook to create a component library, I came across this issue where my component has a ngOnChanges method implemented that doesn't run when I pass in the value from Storybook Controls. The value gets passed from the story to the…
techshot nextgen
- 113
- 7
5
votes
2 answers
Storybook: Inject a mocked provider/service at component level
I have an Angular component that has a component level provider.
@Component({
selector: 'storybook-di-component',
templateUrl: './di.component.html',
providers: [{ provide: TEST_TOKEN, useValue: 123 }],
})
export class DiComponent {
…
Sameera
- 1,025
- 13
- 36
5
votes
3 answers
Test angular component @Output using Storybook and Cypress
I am trying to test the output of an angular component.
I have a checkbox component that output its value using an EventEmitter. The checkbox component is wrapped in a storybook story for demo and testing purposes:
export const basic = () => ({
…
Wim Holvoet
- 61
- 2
- 4