DEV Community: Eddie Chen

Find duplicates in an array of objects in JavaScript

Eddie Chen — Fri, 16 Jul 2021 00:53:35 +0000

export const hasDuplicates = (arr)=>{
  let seen = new Set();
  return arr.some(function(currentObject) {
    return seen.size === seen.add(currentObject.sn).size;
  });
}

Implement i18n using @ngx-translate in an Angular library with Storybook 6

Eddie Chen — Thu, 28 Jan 2021 05:23:00 +0000

ENV

Angular 10.0.4

Storybook 6.1.15

In this post, I'll describe the steps to generate an Angular component library with Storybook that utilize @ngx-translate to provide i18n integration.

Project setup

First let's generate a new workspace

ng new my-workspace --create-application=false --style=scss

Then let's generate an Angular library project inside the workspace.

cd my-workspace
ng generate library my-lib

Install the required modules

npm i @ngx-translate/core @ngx-translate/http-loader --save

Now, let's generate our sample component

ng g c sample

And initialize storybook

npx sb init

Edit sample.component.html

<p>{{ label }}</p>

Edit sample.component.ts

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

@Component({
  selector: 'lib-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css'],
})
export class SampleComponent implements OnInit {
  @Input() label = 'label';
  constructor() {}

  ngOnInit(): void {}
}

Add SampleComponent to exports section in my-lib.module.ts

import { NgModule } from '@angular/core';
import { MyLibComponent } from './my-lib.component';
import { SampleComponent } from './sample/sample.component';

@NgModule({
  declarations: [MyLibComponent, SampleComponent],
  imports: [],
  exports: [MyLibComponent, SampleComponent],
})
export class MyLibModule {}

Add an i18n translation file and name it 'en.json' to stories/assets/i18n folder.

{
  "LABEL": "Hello"
}

Create the I18nModule for the storybook setup inside stories/modules folder

import { NgModule } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@NgModule()
export class I18nModule {
  constructor(translate: TranslateService) {
    translate.setDefaultLang('en');
    translate.use('en');
  }
}

Create sample component stories file 'stories/Sample.stories.ts'

import { Story, Meta } from '@storybook/angular';
import { moduleMetadata } from '@storybook/angular';
import {
  FakeMissingTranslationHandler,
  MissingTranslationHandler,
  TranslateLoader,
  TranslateModule,
} from '@ngx-translate/core';
import { of } from 'rxjs';
import { I18nModule } from './modules/I18nModule';
import { MyLibModule } from '../projects/my-lib/src/lib/my-lib.module';
import { SampleComponent } from '../projects/my-lib/src/lib/sample/sample.component';

const staticTranslateLoader: TranslateLoader = {
  getTranslation(lang: string) {
    return of(require('./assets/i18n/en.json'));
  },
};

export default {
  title: 'Example/SampleComponent',
  decorators: [
    moduleMetadata({
      declarations: [],
      imports: [
        MyLibModule,
        I18nModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useValue: staticTranslateLoader,
          },
          missingTranslationHandler: {
            provide: MissingTranslationHandler,
            useClass: FakeMissingTranslationHandler,
          },
        }),
      ],
    }),
  ],
  component: SampleComponent,
  argTypes: {},
} as Meta;

const Template: Story<SampleComponent> = (args: SampleComponent) => ({
  component: SampleComponent,
  props: args,
  template: `<lib-sample [label]="'LABEL' | translate"></lib-sample>`,
});

export const Default = Template.bind({});
Default.args = {};

Finally, we can run the command and see that i18n is working.

npm run storybook

Making storybook 6 auto-generated control to work with a story template which contains an Angular component

Eddie Chen — Wed, 27 Jan 2021 06:44:12 +0000

ENV

Angular version: 10.0.4
Storybook version : 6.1.15

When I tried to write a storybook story with an Angular component, it works fine when I followed the Official Docs. However when I add a template to the storybook Template like below, the control stops working.

const Template: Story<ComponentComponent> = (args: ComponentComponent) => ({
  component: ComponentComponent,
  props: args,
  template: `<lib-component label="test"></lib-component>`,
});

I also tried the following and it still does not work.

const Template: Story<ComponentComponent> = (args: ComponentComponent) => ({
  component: ComponentComponent,
  props: args,
  template: `<lib-component [label]="args.label"></lib-component>`,
});

The browser complained that args is undefined.

ERROR TypeError: _co.args is undefined

After several attempts, I finally figured it out.
The correct way to write a template is to get rid of the args for whatever reason.
The following code works for me.

const Template: Story<ComponentComponent> = (args: ComponentComponent) => ({
  component: ComponentComponent,
  props: args,
  template: `<lib-component [label]="label"></lib-component>`,
});

Passing objects into Angular 10 Storybook 6 stories

Eddie Chen — Wed, 13 Jan 2021 08:07:58 +0000

I'd put the most important thing first. The solution is below.

const Template: Story<SomeAngularComponent> = (args: SomeAngularComponent) => ({
  component: SomeAngularComponent,
  template: `<some-angular-component [height]="height" [data]="data">`,
  props: {
    ...args,
    data: { id: 1, name: 'SomeObjects' },
    height: '300px',
  },
});

ENV

Angular version: 10.0.4
Storybook version : 6.1.14

I was trying to pass some objects into my Angular component, so I followed the instruction on https://storybook.js.org/blog/introducing-storybook-args/

Like so...

const Template: Story<LineChartComponent> = (args: LineChartComponent) => ({
  component: LineChartComponent,
  props: args
)};

export const Default = Template.bind({});
Default.args = { data: { id: 1, name: 'SomeObjects' } };

However, my Angular component did not receive the data object.
It took me a while to figure this one out.