Guide for nesting components in Storybook using Angular

I am currently working with a folder structure that contains both my button and card components:

https://i.sstatic.net/fNa0t.png

To organize my components, I created a components.module.ts file and placed all my components in it. Then, I imported it into my app.module.ts like this:

https://i.sstatic.net/aYom0.png

https://i.sstatic.net/xiLTt.png

However, I encountered an issue when trying to use the ButtonComponent inside the CardComponent using its selector ( app-button ), as the component is not rendered. Why could this be happening?

For reference, here are the contents of button.component.ts and card.component.html:

https://i.sstatic.net/HcGfj.png

https://i.sstatic.net/xikkn.png

Answer №1

Not an issue with Angular, but Storybook. If you need to showcase a component in Storybook that relies on dependencies, ensure to define the module in the decorators property. Check out the example below.

https://i.sstatic.net/htnA9.png

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

Issue arises when ngModelGroup exists in child component without a provider for ControlContainer

I'm struggling to solve this issue, it's just not functioning as expected. Here is the original plunker created by Pascal Prekht, providing an explanation on template driven forms: And my version can be found here. It mirrors the original but w ...

Binding data to custom components in Angular allows for a more flexible

In my current scenario, I am looking to pass a portion of a complex object to an Angular component. <app-component [set]="data.set"></app-component> I want the 'data.set' object in the parent class to always mirror the 'set&apo ...

Component in Angular2 encountering a null value

Unexpected situations may arise where "this" becomes null within a component. So far, I have encountered it in two scenarios: 1) When the promise is rejected: if (this.valForm.valid) { this.userService.login(value).then(result => { ...

"React's FC generic is one of its most versatile features

I'm currently working on a component that can render either a router Link or a Button based on the provided props. Here is the code snippet I have: import React from 'react'; import Button from '@material-ui/core/Button'; import { ...

Personalize the md-tab component in Angular 2

I'm encountering an issue with styling the md-tab component in Angular 2. While I understand that Angular 2 Materials is currently under development, I am wondering if there is a way to customize it, such as removing the bottom-radius. Below is an exa ...

Stop focusing on mat-select after a selection is made

I am encountering an issue with the following code in my .html file: <mat-form-field> <mat-select #selector(selectionChange)="onSelectionChange($event.value)"> <mat-option *ngFor="let test of tests" [value]="test"> </ma ...

Encountered an error while reloading the page: "Unable to read property 'ArtisanID' of undefined."

Every time I refresh the page, an error pops up saying: Cannot read property 'ArtisanID' of undefined. Any suggestions on how to troubleshoot this issue? I'm relatively new to this framework and my intuition tells me that the component ins ...

Angular module cannot be located

While working on implementing a chat feature for my project using sockJS and STOMP, I encountered several challenges with installing these two libraries. Despite attempting various methods such as installation from index.html, npm install, and manual downl ...

A static method written in Typescript within an abstract class for generating a new instance of the class itself

Imagine I have abstract class Foo { } class Bar1 extends Foo { constructor(someVar) { ... } } class Bar2 extends Foo { constructor(someVar) { ... } } I want to create a static method that generates an instance of the final class (all construct ...

Ways to verify the HTTP 200 status code in Angular when it's not present in the JSON reply

Authentication Service logout() { return this.http.post(this.logOutApi, null); } While the status code does not appear in the JSON response from the backend, it does show on Postman's status. How can the status code be retrieved? Typescr ...

Constantly visible scrolling feature on material side navigation

Is there a way to keep the scroll bar in the sidenav always visible, even when the content is within the Y axis limits? This would prevent the scroll bar from fading in and out every time I open or close one of the mat-menu-items that function as accordio ...

An issue occurred at line 2, character 16 in the generateReport.service.ts file: TypeScript error TS2580 - The term 'require' is not recognized

I have a requirement in my app to generate a report in the form of a Word document with just a click of a button. Previously, I successfully accomplished this using the "officeGen" module in a separate project. You can find more information about the modul ...

How can I utilize Material-UI's DataGrid component to incorporate multiple layers of text within a single cell?

I'm having trouble displaying two separate lines of text in a single cell using Material-UI's datagrid component. Here is the code I have attempted: const columns: ColDef[] = [ { field: "name", headerNam ...

tsconfig.json configuration file for a project containing both `src` and `tests` directories

Looking to achieve a specific project structure: - tsconfig.json - src - app.ts - tests - appTest.ts - appTest.js - dist - app.js If the tests folder did not exist, this tsconfig.json configuration would suffice: { "compilerOptions": ...

The QueryParams/ParamMap consistently returns as blank

Seeking assistance with retrieving a parameter called serverId from the URL. I have the following code setup: constructor(private peopleService: PeopleService, private route: ActivatedRoute) { this.route.paramMap.subscribe(params => { ...

Having trouble retrieving the Ionic 2 slides instance - getting a result of undefined

As I attempt to utilize the slides and access the instance in order to use the slideto functionality programmatically, I find myself encountering the issue of receiving 'undefined' back despite following the documentation. Here is my TypeScript ...

Avoid inserting line breaks when utilizing ngFor

I am using ngFor to iterate through a list of images like this: <div class="image-holder" *ngFor="let image of datasource"> <img src="{{image.url}}" height="150" /> </div> Below is the corresponding CSS code: .image-holder { di ...

Encountering an Angular error while trying to use the command "npm run dev:ssr" to observe server-side rendering on the localhost

When I run this command, it starts listening on port 4200 but the page keeps loading without ever fully loading and shows this error in the command prompt: Unhandled Promise rejection: connect ECONNREFUSED 127.0.0.1:6379 ; Zone: <root> ; Task: Promis ...

Discover the power of debugging Typescript in Visual Studio Code with Gulp integration

I've been working on setting up an express/typescript/gulp application, and while it's functional, I'm struggling to debug it using source-maps. Here is how I've set it up: Gulp File var gulp = require('gulp'), nodemon ...

Please eliminate the notification stating "The baseHref option is deprecated, instead use the baseHref option directly in the browser builder."

After updating my project to Angular version 11, I encountered an error when trying to run it: "Option baseHref is deprecated, use baseHref option in the browser builder itself". I attempted to add baseHref: "/certs/" in angular.json, but the error persis ...