Angular Learning
Tags: javascript, angular, devjournal, webdev
Published: 2021-04-06 05:45:00

Today I continued my learning on angular and started with component style.

## Component Styles

We can do the styling in different ways. I already downloaded the bootstrap for the app I am currently working by using the command
` npm install --save bootstrap@3 ` in the command line.

We can specify the styles inside the @Component block as `styles:[``] or styleUrls `.
In `styleUrls` field, we specify the location of the css file for the particular component.
In `styles:` we write the css statements.

```
@Component({
  selector: 'app-root', // unique
  templateUrl: './app.component.html',
  //styleUrls: ['./app.component.css'] - cannot include both styleUrls and styles together
  styles: [`
  	h3 {
  		color: dodgerblue;
  	}
  `]
})
```

> One of the things to note is that we cannot include both styleUrls and style fields together. Thats the reason I commented out of the field in the code.

![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9ma4yt9uiinhnl3kbth.png)
 
## Databinding
 Databinding is actually communcation between the Typescript code and the Template HTML.

![Untitled drawing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bkjg5ctehsjob98bj2lz.jpg)
 
We can use it for 3 things
* Output Data : can be done using String interpolation, Property Binding

* React to User events : Event binding

* Combination of both : Two way binding

### String Interpolation

These are generally used to output any text in the HTML file.

`<p>Inside the {{'Rohith server'}} component with ID {{ serverId }} and status {{ getServerStatus() }}</p>`

This is an example for the syntax for the String interpolation inside the html file and `serverId` and `getServerStatus()` is implemented inside the typescript file

```
export class ServerComponent {
	serverId: number = 10;
	serverStatus: string = 'offline';
	
	getServerStatus() {
		return this.serverStatus;
	}
}
```
![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vm4ytznc2sprl5wrij2n.png)

### Property Binding
These are generally used for changing some property.

### Event Binding
These type of binding is generally used to react to some event triggered by the user after clicking some button or something.

```
export class ServersComponent implements OnInit {
	allowNewServer = false;
	serverCreationStatus = 'No server was created'

  constructor() { 
  	setTimeout(() => { 
  		this.allowNewServer = true;
  	},2000);
  }

  ngOnInit(): void {
  }

  onCreateServer() {
  	this.serverCreationStatus = 'Server was created'
  }

}
```

Here we set `allowNewServer` to false and `serverCreationStatus = 'No server was created'`. Then we set a timer which enables a button after 2 seconds which indicates the property binding.
Now when the user clicks the button, the onCreateServer() method will be executed and the text `Server was created` will be displayed which indicates the event binding.

```
<button 
class="btn btn-primary" 
[disabled]="!allowNewServer"
(click)="onCreateServer()"> <!-- event will occur -->
Add Server</button> <!--[disabled] indicates property binding. We can also bind other properties rather than html properties</!-->
<!-- <p [innerText]="allowNewServer"></p> -->
<p> {{ serverCreationStatus }}</p>
<app-server></app-server>
<app-server></app-server>
```

At first the button will be displayed as shown in the below figure : 
![Screenshot from 2021-04-06 11-12-30](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtj5jka8u09nwf9bllmj.png)

After two seconds the button will be enabled and we can click on it to show `Server was created` on the html page.

![Screenshot from 2021-04-06 11-14-05](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/it9zu8h0qqto1f2i6myy.png)


Thats all I learned today and if there is any correction , help me to correct.  

My Github Repo : [Angular Study](https://github.com/Rohithv07/AngularStudy)