my-fa-input

0.0.1 • Public • Published

Building an Angular Library

angular-advanced-course

Run yarn to install dependencies.

Run npm start to start development server.

This is my coursework for Angular University's "Angular Advanced Library Laboratory: Build Your Own Library" course.

Branches au-input : First Section of the Course 1-create-lib 2-content-projection 3-mimic-default-behaviour 4-design-component-styling 5-setup-for-distribution 6-testing

Steps

First, design the public API for the library.

  • START MAKING LIB

  • Make a lib folder for public components.

  • Design component API with @Input().

  • [ngClass] works great with a getter method

  • Style components. Angular gives us good (but not perfect) style encapsulation

  • use :host

  • CONTENT PROEJCTION

  • Zoom in and out to see how well the structural styles hold up.

  • AVOID wrapping regular HTML attributes by using Content Projection.

  • If using content projection, you'll need to override the styles of the projected element

  • If you need to break style encapsulation use :host ::ng-deep <component>

  • MIMIC DEFAULT BEHAVIOUR

  • You could use template references and @ContentChild() to get a reference to the element being passed in to the component

  • However, that's not usually what you will want to do. Instead, make a directive that selects any html element that you are looking for, and pass that directive to @ContentChild()

  • In Angular, it is often practical to not reference projected content directly.

  • Add a helpful error message with ngAfterContentInit to make sure the component is loaded correctly.

  • Use @HostBinding to implement state classes for projected content

  • DESIGN COMPONENT STYLING

  • Separate Structural styles from Theme styles

  • :host-context() selects by working with class names defined outside the component. It is very useful for providing extra themes in our library.

  • Angular has style isolation mechanisms that work differently from regular CSS.

  • The default Angular style isolation mechanism, Emulated View Encapsulation, is design to give us good assurance than our styles will be encapsulated when used in other projects

  • Most of the time we will want to use Emulated View Encapsulation

  • SETUP FOR DISTRIBUTION

  • Make sure AoT Compilation is on.

  • Make a module file that has the same name as the npm package you will create.

  • Add to package.json "serve:prod": "ng serve --prod --aot",

  • Setup an index.ts at the root of application and export the new module.

  • TESTING

  • This is a scenario where we need to do an INTEGRATION test because our component will be integrating into other people's code.

  • Start by giving your component pieces unique ids

  • Add a test class to content that is being projected so that its existance can be tested

  • Setup an app level test by configuring the testing module to have AppComponent AuFaInputComponent and InputRefDirective.

  • Write some tests

  • For integrated tests you may need to run Angular Change Detection to ensure that your expectations are working with elements that have been fully processed

  • fixture is a very helpful class that has all kinds of useful debugging features like .debugElement .nativeElement

  • There is a By.css helper to select pieces from the component under test.

  • PUBLISH TO NPM

  • Using the npm package format is the most recommended for open-source. However, if you want to keep the library private it's actually simpler to publish.

Readme

Keywords

none

Package Sidebar

Install

npm i my-fa-input

Weekly Downloads

0

Version

0.0.1

License

MIT

Unpacked Size

36.8 kB

Total Files

37

Last publish

Collaborators

  • kappow