Skip to content

Lab 2: Your first component

Christian Liebel edited this page Oct 8, 2019 · 12 revisions

Hint: if you got lost, you can always check out the corresponding branch for the lab. If you want to start over, you can reset it by typing executing git reset --hard origin/lab-1

We are now ready to create our first component. Let’s start with an easy one, a button component.

Lab

  • On your console, run:
ng g @ngx-storybook/schematics:c button

This command creates a new Angular module, component and stories file for the button component. Hint: ng g is a shorthand for ng generate.

In our newly generated src/app/button/button.component.ts, we now want to add the following line, to add the label property:

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent implements OnInit {
+  @Input() public label: string;

  constructor() { }

  ngOnInit() {
  }

}

Next, change the template of the component (src/app/button/button.component.html) as follows:

- <p>button works!</p>
+ <button>{{ label }}</button>

To test if this property is accessible in Storybook, add the following code to your src/app/button/button.stories.ts file:

import {storiesOf} from '@storybook/angular';
import {ButtonComponent} from './button.component';

storiesOf('Components | Button', module)
  .add('Default', () => ({
    component: ButtonComponent,
+    props: {
+      label: 'Submit'
+    }
  }));

Self-check

  • In Storybook, you should now see an additional story Component | Button.
  • In Storybook, the button component should display the label Submit

Hint: if you got lost, you can always check out the corresponding branch for the lab. need the solution, you can reset it by typing executing git reset --hard origin/lab-2

You can’t perform that action at this time.