Angular4: Pass data from parent to child component (part 5)

Set  up an ng project,

$ ng new angularcomponentpassing

Create a new component,

$ ng g c cockpit

File: cockpit.component.ts

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

@Component({
selector: ‘app-cockpit’,
templateUrl: ‘./cockpit.component.html’,
styleUrls: [‘./cockpit.component.css’]
})
export class CockpitComponent implements OnInit {
@Input(‘srvElement’) element: {name: string, id: number;}
constructor() { }

ngOnInit() {
}

}

Note: ‘srvElement’ is an alias for ‘element’ and can be left out above like this,

@Input() element: {name: string, id: number;}
constructor() { }

File: cockpit.component.html

<hr>
<p>
cockpit works!
</p>
<p><strong>Name:</strong> {{ element.name }}, <strong>id:</strong> {{ element.id }}</p>

File: app.component.ts

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘app works!’;
serverElements = [{name: ‘John’, id: 8}, {name: ‘Matt’, id: 10}];
}

File: app.component.html

<h1>
{{title}}
</h1>
<app-cockpit *ngFor=”let serverElement of serverElements” [srvElement]=”serverElement”>hello</app-cockpit>

If the alias for ‘element’, which is ‘srvElement’ is not used then the above line should be,

<app-cockpit *ngFor=”let serverElement of serverElements” [element]=”serverElement”>hello</app-cockpit>

Angular 4: Deploy to gh-pages (part 4)

Presuming: you have an Angular 2 or 4 project ready to deploy to gh-pages, and that you’ve created a github repo connected to your local directory and git inited it. Also you need to have installed and be using angular-cli. If not look at this post.

Angular 4 projects can be deployed on gh-pages by first installing the npm package angular-cli-ghpages,

$ sudo npm i -g angular-cli-ghpages

The previous command is run in your local master branch. There is no need to create a local gh-pages branch. First create your dist folder and set the base-href with,

$ ng build –prod –base-href https://<USERNAME>.github.io/<REPONAME>/

Do not forget the trailing forward slash at the end.

Then sent this to your remote gh-pages branch, which does not need to be previously created.

$ sudo angular-cli-ghpages –branch gh-pages

This is also run in your local master branch. Running this commands as deparately as above did not work for me, I had to create a script called ‘deploy’ which I placed at the end of the package.json “scripts” object, like this,

“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”,
“deploy”: “ng build –prod –base-href https://shanegibney.github.io/basic-maths-app/ && angular-cli-ghpages –branch gh-pages
},

Then run this script with,

$ sudo npm run deploy

Then navigate to,

https:/<USERNAME>/.github.io/<REPO-NAME>/

The following blog post from shermandigital.com may be useful.

Angular 4: Forms (part 3)

Let’s add an input for with type=”number”. This will be in the sum app’s html file, src/app/sum/sum.component.html

What’s important here in the ngModel and it’s round and square brackets. We can set the inputted value to num1 with,

[(ngModel)]=”num1″

Also the onSum() method is called when the button is clicked.

We need to set num1, num2 and sum variables in src/app/sum/sum.component.ts and create the onSum() method which is called to sum the numbers when the button is clicked.

Angular 4: Bootstrap & Components (part 2)

First install Bootstrap,

$ npm install –save bootstrap

Then add bootstrap to .angular-cli.json which can be found in the root of the project. Find the ‘styles’ and add the path for bootstrap like this,

“styles”: [
“../node_modules/bootstrap/dist/css/bootstrap.min.css”,
“styles.css”
],

Then in the project root run,

$ npm install

Next get the sum component into the root component.
Go to src/app/app.component.html and place the selector for the sum component which is,

<app-sum></app-sum>

This gets placed as follows,

Now that we’ve placed our sum component in the root component we would like to set it’s contents. This can be done in src/app/sum/sum.component.html

And so at http://localhost:4200 we should see the contents of the sum component inside the root component like this,

Angular 4: Getting started (part 1)

We’ll create a simple app with Angular 4 which will sum two numbers input into a form.

Forst install Angular CLI (https://cli.angular.io/)

$ npm install -g @angular/cli

Create a new project called mathapp,

$ ng new mathapp

Move into this newly created directory,

$ cd mathapp

Now create a component called sum

$ ng g c sum

where g is short for generate and c is for component.

Next be sure to be in the same directory that has package.json and install all packages in there with npm. yarn is also a good package manager, consider faster than npm because it will not install package dependecies already installed in previous packages.

$ npm install

Now let us run the server with,

$ ng serve

Navigate to http://localhost:4200

and you should see the text,

So now we are well on our way! Well done!

Angular 4: Generating Components and How to Use

To create a new component in Angular 4 automatically with the Angular CLI, in the projects root directory type,

$ ng generate component my-component

Where ‘my-component’ is the name of the component. The commands ‘generate’ and ‘component’ can respectively be replaced with ‘g’ and ‘c’. The following command does the same as the above command,

$ ng g c my-component

This will create a new folder in the app directory with the following files,

The command also makes changes to the file src/app/app.module.ts on lines 7 and 12,

Also the file src/app/my-component/my-component.component.ts is created as follows,

These changes could all be implemented manually instead of using the command.

To create a new component without the src/app/my-component/my-component.component.spec.ts which is for unit unit testing,

$ ng g c my-component –spec false (Note: before the spec there are two hyphens)

my-component.component.ts contains

templateUrl: ‘./my-component.component.html’,

to use the contents of srcv/app/my-component.component.html in the root app html file src/app/app.component.html add a custom html tag with the component name as follows,

<app-my-component></app-my-component>

Angular 4: Data Binding Two-Way-Binding

Initially the button is disabled until a username is input, after which time it is possible to reset the username by clicking the button.


In app.component.ts he simply declare two variables and set ‘username’ to an empty string. The function clears the string and resets the username.

export class AppComponent {
username: string = '';
allowButton: boolean = false;
onUsernameReset(){
this.username = '';
}
}

In app.component.html we use [(ngModel)] for two-way-databinding. This uses both square and round brackets. The input is set to ‘username’ and because of the two-way-binding this is available everywhere, e.g. for string interploation on the next line using {{ username }} and for property binding [disabled]=”!username”

<div class="container">
<div class="row">
<div class="col-md-4">
<label for="box">Username:</label>
<input name="box" type="text" class="form-control" [(ngModel)]="username"/>
<p> {{ username }} </p>
<button class="btn btn-primary" [disabled]="!username" (click)="onUsernameReset()">Reset username</button>
</div>
</div>
</div>

The ‘click’ event is put in round brackets and it calls the function onUsernameReset() which can be found in app.component.ts

Angular 4: Data Binding Event Binding

When an event occurs i.e. clicking a button we want a function onButton() to be called.

In app.component.ts we have the function onButton() which simply logs a few words to the console,

export class AppComponent {
onButton(){
console.log("You pressed it, well done!")
}
}

In app.component.html the event, in this case ‘click’, is in round brackets,

<button class="btn btn-primary"
(click)="onButton()"
>Button</button>

Angular 4: Basic Setup & Bootstrap

https://cli.angular.io/

Install Angular 4 using the Angular CLI tool,

$ npm install -g @angular/cli

Create a new app or project,

$ ng new my-new-app

This creates a new directory, next move in to it,

$ cd my-new-app

Run the app in development,

$ ng serve

Install bootstrap,

$ npm install --save bootstrap

Then add bootstrap to .angular-cli.json which can be found in the root of the project. Find the ‘styles’ and add the path for bootstrap like this,

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],

It may be necessary here to run,

$ npm install

from the project root directory, the directory containing the node_modules directory.

You can then use bootstrap in my-new-app/src/app/app.component.html

<div class="container">
<div class="row">
<div class="col-md-4">one</div>
<div class="col-md-4">two</div>
<div class="col-md-4">three</div>
</div>
</div>