I've found myself in a bit of weird situation, in my quest to update my skill set over the past year or two I seem to have put all my eggs in one basket. React is a joy to work in and if you're reading this you probably know what i'm talking about but not every employer is looking for a React Developer. So if the last year was dedicated to updating my skill set to React then the next year will be dedicated to diversifying that skill set to include other frameworks and languages. This post will focus on the Angular component of that mission.

Components

Just like React or Vue, Angular uses components for breaking down a UI into smaller bite sized chunks it just goes about it in a different way!

Important to note that the examples below use Typescript but for sake of nailing down key-concepts first we will talk more  about how and why angular uses Typescript in a later section.

Comparing an Angular Component to a React Component

Simple Component in Angular

/* ANGULAR
FILE: ./title.component.ts
*/

import { Component } from '@angular/core';

@Component({
  selector: 'title-component',
  template: `
    <h1>{{title}}</h1>
    `
})
export class TitleComponent {
  title = 'Really Cool Title';
}

Below is a declaration for all the components in our app, In React we might do something similar when we have multiple components and use a single Index.js to export them.

/* ANGULAR
FILE: ./app.module.ts
*/

import { TitleComponent } from './title.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    TitleComponent
  ],
  bootstrap: [ TitleComponent ]
})
export class AppModule { }
FILE: index.html
<!DOCTYPE html>
<html>

  <body>
    <title-component></title-component>
  </body>

</html>

Same Component in React

/* REACT
FILE: ./Title.js
*/

import React from 'react'

class Title extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            title: 'Really Cool Title'
        }
    }
    render() {
        return <h1> {this.state.title} </h1>
    }
}

export default Title;
/* REACT
FILE: ./App.js
*/

import React from 'react'

import Title from './Title'

class App extends React.Component {
    render() {
        return <Title></Title>
    }
}

export default Title;

[UPDATING AS I GO]

Great Resources For Learning Angular

Official Angular Getting Started Guide