This project was generated with Angular CLI version 6.0.8.
Refactor api-service.module using the new Treeshakable Providers API
The DemoComponent help only to display fake info of all injected service
- Implement simple-card.final.component.ts to reproduce the card structure of simple-card.component.ts using ng-content. Open demo.component.ts to get the structure
You will get some css issues but it is OK. We will not focus on it. We should only be able to see the data and the element correctly positioned.
- Create a custom directive
appHidden
that will hide the element - Create a custom directive
appClassSetter
that will bind the "detail" class in the element - Create a custom directive
appClick
that will listen the click event in the element - Create a custom directive
appConfigurationAriaRole
that will receive in Input the role value that will be bind into the aria role attribute. By default, it will be set to 'link'. Directive usage should be for example:<span appConfigurationAriaRole="button">I AM</span>
- Open the demo.component.ts and follow the comments.
- Create a custom directive
appHasPermission
that will remove/add the element based on a set of permission
- Rewrite the date-picker component using control value accessor (have to work with formControl). Duplicate the component and call it
app-date-picker-accessor
- Create a render props to fetch Github API and render it
- Create a render props wrapper to HttpClient GET
- Rewrite GithubUser using HttpClientGet
- Implement
app-data-provider
- Implement
app-data-consumer
- Implement
DataProviderService
- Make it working like below
<app-data-provider key="theme" [data]="{ theme: 'dark' }">
...
...
<app-data-consumer key="theme">
<ng-template let-theme="theme">
{{theme}} <-- 'dark'
</ng-template>
</app-data-consumer>
...
...
</app-data-provider>
Inspired by the repo of isaacplmann/ngx-data-provider
-
Refactor the Chat component using the compound pattern. So we will have as components:
- Chat
- ChatMessages
- ChatInput
- ChatButton
It should look like that:
<app-chat-final> <app-chat-messages></app-chat-messages> <app-chat-input></app-chat-input> <app-chat-button></app-chat-button> </app-chat-final>
-
Duplicate
<app-chat-button></app-chat-button>
in the template above, you will see that no add is perform when I click on the second button.Fix it by implementing the
<app-chat-final-multiple>
It should look like that:<app-chat-final-multiple> <app-chat-messages></app-chat-messages> <app-chat-input></app-chat-input> <app-chat-button></app-chat-button> Duplicated:<app-chat-button></app-chat-button> </app-chat-final-multiple>
-
When finished, add
<app-chat-embedded-button/>
that contains a ChatButton, you will see that no add is perform when I click on the embedded button. Fix it using DIIt should look like that:
<app-chat-final-di> <app-chat-messages-di></app-chat-messages-di> <app-chat-input-di></app-chat-input-di> <app-chat-button-di></app-chat-button-di> <app-chat-embedded-button></app-chat-embedded-button> </app-chat-final-di>
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.