Please be aware that this all is work in progress and will change often. As we did not release any version (neither an alpha or beta version) yet, there is no stable state to which we can refer to. Nevertheless let us give you some short hints on what you can do to install your own local version:
Have a look at the project board
Take an issue that’s in the ready section and has nobody assigned to it
Assign yourself
When you start working on it, move the issue to the “in progress” section
Work on a separate branch for the issue on your fork
in the comments of the pull request, write something akin to “this PR connect’s to #{the ID of the issue}”. That way the issue will be moved automatically to the review column.
When at least two people have reviewed and approved your PR, it can be merged in master.
Please keep an eye on your pull request afterwards, the reviewers may have questions or comments about it, or ask you to tackle things in a different way, before they can approve it
Most discussions about the task or the pull request can happen through the github & project board comments.
If it’s more complex you can bring it up in one of these meetings.
After your Pull Request has been merged, drag the issue to the done column on the project board. (this can also be automated by adding “this merge closes #{the id of the issue}” in the merge comment.
npm start) as well as the webpack build (npm run watch:dev)npm run lintsidebar.component.html sidebar.component.scsssidebar.component.tstemplateUrl attribute should contain a reference to the HTML file: e.g. templateUrl: './sidebar.component.html'styleUrls attribute (this is an array) should contain a reference to the style file: e.g. styleUrls: ['./sidebar.component.scss']Example:
@Component({
selector: 'ds-sidebar',
styleUrls: ['./sidebar.component.scss'],
templateUrl: './sidebar.component.html'
})
export class SidebarComponent {
} |
margin-bottom: $spacer-y; instead of margin-bottom: 15px; and color: $brand-primary; instead of color: #0275d8;)$ds-table-margin-bottom: ($font-size-base * 2) - ($gutter-width / 2);Component Styles
name.component.scss, in the same directory as the component. e.g. for src/app/home/home.component.ts the component style file is src/app/home/home.component.scss.translate pipe. e.g.: "my-route.my-component.my-label-descriptor": "My User Facing Text";"<h1>{{ 'my-route.my-component.my-label-descriptor' | translate }}</h1>"${feature-name}-actions.ts. e.g. host-window.actions.tsdspace/feature-name/ACTION-NAME, added to an ActionTypes object.${feature-name}-reducer.ts. e.g. host-window.reducer.tsLOGIN_REQUEST action, with the user's credentials as its payload.LOGIN_SUCESS action, with the token that was returned.LOGIN_ERROR action, with the error message that was returned.This gist shows how you would use it in practice:
In the component I specify collection$. The dollar is a convention to indicate an observable
In the OnInit: this.collection$ = this.cds.findAll();
And then in the template, handle the different cases: dedicated messages for isLoading and hasFailed and the actual data for hasSucceeded
of course in a more realistic scenario you might send the error to a notification service instead of handling it yourself
In the template I use an ng-container and the async pipe to unwrap the observable: every time the observable changes the contents of this block will be re-rendered, and collectionRD will have the latest value
The question marks check for null or undefined: the rest of the statement won't be executed unless that variable before the question mark has a value.