Style Guild

Below are suggestions for naming and style conventions.
1.
Theme files naming conversion
1
about.component.scss
2
about.component.scss-theme.scss
Copied!
2.
Apply padding for content if needed
1
:host {
2
display: block;
3
padding: 1.5%;
4
position: relative;
5
}
Copied!
3.
How to generate test data?
use https://next.json-generator.com https://next.json-generator.com/4Js2XUryH https://randomuser.me/api/?nat=us&results=100&exc=login,registered&seed=sumo​
1
[
2
  {
3
    'repeat(1, 101)': {
4
      id: '{{index(1)}}',
5
      picture: 'https://source.unsplash.com/random/200x200',
6
      gender: '{{random(["male"],["female"])}}',
7
      name: {
8
        first: '{{firstName(this.gender)}}',
9
        last: '{{surname()}}'
10
      },
11
      dob: '{{moment(this.date()).format()}}',
12
      company: '{{company().toUpperCase()}}',
13
      email: function (tags) {
14
        return (this.first_name + '.' + this.last_name + '@' + this.company + tags.domainZone()).toLowerCase();
15
      },
16
      phone: '+1{{phone()}}',
17
      address: {
18
        street: '{{integer(100, 999)}} {{street()}}',
19
        city:'{{city()}}',
20
        state:'{{state()}}',
21
        zip:'{{integer(10000, 99999)}}',
22
        latitude: '{{floating(-90.000001, 90)}}',
23
        longitude: '{{floating(-180.000001, 180)}}'
24
      },
25
      about: '{{lorem(1, "paragraphs")}}',
26
      likers: '{{integer(0, 32)}}'
27
    }
28
  }
29
]
Copied!
1.
How to generate TypeScript interfaces from given JSON?
Online Tools
​https://jvilk.com/MakeTypes/​
​http://json2ts.com/​
NGXS naming conventions
Ref: https://github.com/amcdnl/ngxs#style-guide​
Stores should always have the Store suffix. Right: ZooStore Wrong: Zoo
Stores should have a .store.ts suffix for the filename
Selects should have a $ suffix. Right: animals$ Wrong: animals

Envoy

Angular Universal

Last modified 9mo ago

Copy link

Contents

Online Tools