documentation


1.Commands for Creating a project:


2. Run http://localhost:4200/ in browser
Theory:
What is a component in Angular 2
Angular 2 is a component i.e components are the basic building blocks of an Angular application




What is a component in Angular 2
A component in Angular is a class with a template and a decorator. So in simple terms a component in Angular is composed of these 3 things
  • Template - Defines the user interface. Contains the HTML, directives and bindings.directives means(ie.,#use of children components selectors in parent component to display childs components data in parent cmpt #) 
  • Class - Contains the code required for template. Just like a class in any object oriented programming language like C# or Java, a class in angular can contain methods and properties. Properties contain the data that we want to display in the view template and methods contain the logic for the view. We use TypeScript to create the class.
  • Decorator - We use the Component decorator provided by Angular to add metadata to the class. A class becomes an Angular component, when it is decorated with the Component decorator.
we have run the Angular Website(ie: localhost:4200). One of the files our project, is the app.component.ts file. You can find this file in the "app" folder. This file contain a component. The name of the component is AppComponent. The AppComponent is the root component of the application. I have commented the code in the following example and it should be self-explanatory.

// Component decorator is provided by the Angular core library, so we
// have to import it before using it. The import keyword is similar to
// using keyword in C#. Any exported member can be imported using import
// keyowrd.
import { Component } from '@angular/core';

// The class is decorated with Component decorator which adds metadata
// to the class. We use the @ symbol to apply a decorator to the class
// Applying a decorator on a class is similar to applying an attribute
// to a class in C# or other programming languages. Component is just
// one of the deveral built-in decorators provided by angular. We will
// discuss the other decorators provided by angular in upcoming videos
@Component({
    // component has several properties. Here we are using just 2. For
    // the full list of properties refer to the following URL
    // https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html
    // To use this component on any HTML page we specify the selector
    // This selector becomes the directive <my-app> on the HTML page
    // At run time, the directive <my-app> is replaced by the template
    // HTML specified below
    selector: 'my-app',
    // The template contains the HTML to render. Notice in the HTML
    // we have a data-binding expression specified by double curly
    // braces. We have a defualt value "Angular" assigned to "name"
    // property in the AppComponent class. This will be used at runtime
    // inplace of the data-binding expression
    template: `<h1>Hello {{name}}</h1>`,
})
// export keyword allows this class to be exported, so other components 
// in the application can import and use it if required
export class AppComponent {
    // name is a property and the data type is string and
    // has a default value "angular"
    name: string = 'Angular';
}

Notice in the index.html page, we have used the AppComponent using the directive <my-app>. At runtime <my-app> directive is replaced with the HTML we specified using the selector property in the component decorator.

<!DOCTYPE html>
<html>
<head>
    <title>Angular QuickStart</title>
    <base href="/src/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="/node_modules/core-js/client/shim.min.js"></script>
    <script src="/node_modules/zone.js/dist/zone.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
        System.import('main.js').catch(function (err) { console.error(err); });
    </script>
</head>
<body>
    <my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
When we build the project in Visual Studio TypeScript is compiled to JavaScript which the browser understands and renders. Our TypeScript code for this component is present in app.component.ts file. Notice a corresponding app.component.js is file is generated on build. To see the generated .js file click on show-all-files icon in solution explorer. Besides .js files, there are several other files.



#####################5
n Part 4, we have used an inline view template. Notice the code we have implemented in app.component.ts file. We have embedded the view template inline in the .ts file. 

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

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name }}</h1>`
})
export class AppComponent {
    name: string = 'Angular';
}

The view template is inline in a pair of backtick characters. The first question that comes to our mind is can't we include the HTML in a pair of single or double quotes. The answer is "YES" we can as long as the HTML is in a single line. So this means the above code can be rewritten using a pair of single quotes as shown below. 

template: '<h1>Hello {{name }}</h1>'

We can also replace the pair of single quotes with a pair of double quotes as shown below, and the application still continues to work exactly the same way as before.

template: "<h1>Hello {{name }}</h1>"

The obvious next question that comes to our mind is when should we use backticks instead of single or doublequotes
If you have the HTML in more than one line, then you have to use backticks instead of single or double quotes as shown below. If you use single or double quotes instead of backticks you will get an error.

template: `<h1>
                      Hello {{name }}
                </h1>`

Instead of using an inline view template, you can have it in a separate HTML file. Here are the steps to have the view template in a separate HTML file

Step 1 : Right click on the "app" folder and add a new HTML file. Name it "app.component.html".

Step 2 : Include the following HTML in "app.component.html"

<h1>
    Hello {{name}}
</h1>

Step 3 : In "app.component.ts", reference the external view template using templateUrl property as shown below. Notice instead of the "template" property we are using "templateUrl" property. Please note that templateUrl path is relative to index.html 

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

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    name: string = "Angular";
}



What are the differences between template and templateUrl properties and when to use one over the other
Angular2 recommends to extract templates into a separate file, if the view template is longer than 3 lines. Let's understand why is it better to extract a view template into a seprate file, if it is longer than 3 lines.

With an inline template 
  1. We loose Visual Studio editor intellisense, code-completion and formatting features.
  2. TypeScript code is not easier to read and understand when it is mixed with the inline template HTML.
With an external view template
  1. We have Visual Studio editor intellisense, code-completion and formatting features and 
  2. Not only the code in "app.component.ts" is clean, it is also easier to read and understand

#################### part-6 angular-2-nested-components.html  ###################



As we already know Angular 2 is all about components. A component in Angular allows us to create a reusable UI widget. A component can be used by any other component. Let's look at a simple example of nesting a component inside another component



Here is what we want to do. Create a page that displays Employee details as shown below. 



Angular 2 nested components


As you can see from the image below we want to create 2 components

  • AppComponent - This component is the root component and displays just the page header
  • EmployeeComponent - This component is the child component and displays the Employee details table. This child component will be nested inside the root AppComponent

angular 2 component in another component

Step 1 : Right click on the "App" folder and add a new folder. Name it "employee". We will create our EmployeeComponent in this folder.

Step 2 : Right click on the "employee" folder and add a new HTML page. Name it employee.component.html. Copy and paste the following HTML.

<table>
    <tr>
        <td>First Name</td>
        <td>{{firstName}}</td>
    </tr>
    <tr>
        <td>Last Name</td>
        <td>{{lastName}}</td>
    </tr>
    <tr>
        <td>Gender</td>
        <td>{{gender}}</td>
    </tr>
    <tr>
        <td>Age</td>
        <td>{{age}}</td>
    </tr>
</table>

Step 3 : Right click on the "employee" folder and add a new TypeScript file. Name it employee.component.ts. Copy and paste the following code in it. At this point we have our child component EmployeeComponent created. Next let's create the root component - AppComponent.

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

@Component({
    selector: 'my-employee',
    templateUrl: 'app/employee/employee.component.html'
})
export class EmployeeComponent {
    firstName: string = 'Tom';
    lastName: string = 'Hopkins';
    gender: string = 'Male';
    age: number = 20;
}

Step 4 : We are going to use the root component to just display the page header. So in "app.component.ts" file, include the following code. Notice, since the View Template HTML is just 3 lines we have used an inline template instead of an external template. Angular2 recommends to extract templates into a separate file, if the view template is longer than 3 lines.

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

@Component({
    selector: 'my-app',
    template: `<div>
                    <h1>{{pageHeader}}</h1>
               </div>`
})
export class AppComponent {
    pageHeader: string = 'Employee Details';
}

At this point if we run the application, we only see the page header - "Employee Details", but not the table which has the employee details. To be able to display employee details table along with the page header, we will have to nest EmployeeComponent inside AppComponent. There are 2 simple steps to achieve this.

Step 1 : In "app.module.ts" file we need to do 2 things as shown below.
  • Import EmployeeComponent 
  • Add EmployeeComponent to the declarations array
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { EmployeeComponent } from './employee/employee.component';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, EmployeeComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

What is AppModule
AppModule is the root module which bootstraps and launches the angular application. You can name it anything you want, but by convention it is named AppModule.

It imports 2 system modules - BrowserModule and NgModule 
  • BrowserModule - Every application that runs in a browser needs this module. In a later lecture in this course we will discuss NgIf and NgFor directives which are also provided by this module.
  • NgModule - @component decorator adds metadata to an angular component class, similarly       @NgModule decorator adds metadata to the angular module class.
In Part 4 , we discussed that if a class is decorated @component decorator then that class becomes an angular component. Similarly if a a class is decorated with @NgModule decorator then that class becomes an angular module.

Properties of the @NgModule decorator
.
  • imports - Imports the BrowserModule required for an angular application to run in a web browser
  • declarations - Contains the components registered with this module. In our case we have two - AppComponent and EmployeeComponent
  • bootstrap - Contains the root component that Angular creates and inserts into the index.html host web page
Step 2 : In "app.component.ts" file include "my-employee" as a directive. Remember in "employee.component.ts" file we used "my-employee" as a selector.

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

@Component({
    selector: 'my-app',
    template: `<div>
                    <h1>{{pageHeader}}</h1>
                    <my-employee></my-employee>
                </div>`
})
export class AppComponent {
    pageHeader: string = 'Employee Details';
}

Run the application and you will see both page header and the employee details table. The employee details table is not styled very well. To style the table, include the following styles for <td> and <table> elements in styles.css file.

table {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size:large;
    border-collapse: collapse;
}

td {
    border: 1px solid black;
}

Run the application and you will now see the employee details table with the specified styles applied. At this point, launch browser developers tools and click on the "Elements" tab and notice <my-app> and <my-employee> directives in the rendered HTML. 

angular 2 nested components example









Comments

Post a Comment

Popular posts from this blog

reactjs questions part 4

A prop change does not re-render a component if the prop is stored as a local variable. It only re-renders when the prop is stored as a state variable. =======  I take 2-3 interviews per week on average for react devs. The most common one I ask my candidates is this: Explain how react works under the hood to me like I'm 5 yr old What problem did react come to solve? What are composable components? How do you separate logic and style? What are the security measures to be taken to avoid data leak in frontend TYPESCRIPT specific How do you validate form input data  How do you design typesafe components GENERAL what are accessible components, how do you design them ? State management - redux vs context API.  --------------------------2------------------------------- Here are some key API-related questions to prepare for your React.js interview: API Calls and Data Manipulation How do you make API calls in a React application and handle the response data? What is the best pract...
Read more

ReactJS: How and when to force a React component to re-render

Image
What is force re-rendering? Force re-rendering in React is like pressing the refresh button on a webpage, even when the page seems just fine. In React, it means telling a component to update and redraw itself, even if nothing has really changed in the data (stat/props) it uses. Although React is usually good at knowing when it is time to update a component, there are moments when you want to take the reins and tell it to refresh a certain part of the codebase. In this article, we will explore this in more detail. Understanding React’s rendering behavior Let’s take a closer look at how React’s rendering process works by default. To understand when and why you might need to nudge React into re-rendering, you need to get familiar with its underlying architecture. At the heart of  React’s rendering  magic lies the Virtual DOM. Imagine it as a clone of the actual DOM, the structure of your webpage. React uses this Virtual DOM to figure out what needs to be updated when your data ch...
Read more

Q: Error Boundary in React that catches an error and displays a fallback UI

ErrorBoundary Component : This catches errors in its child components and displays a fallback UI ( Something went wrong. ). MyComponent : This component intentionally throws an error to demonstrate how the error boundary works. App Component : Wraps  MyComponent  with  ErrorBoundary  to catch and handle errors  When you run this code, you'll see "Something went wrong." displayed on the screen because MyComponent throws an error, which is caught by the ErrorBoundary .  CREATING SAMPLE: Let's create a simple example of an error boundary in React that catches an error and displays a fallback UI when an error occurs in a component. 1.ErrorBoundary Component import React , { Component } from " react " ; class ErrorBoundary extends Component {   constructor ( props ) {     super ( props ) ;     this . state = { hasError : false } ;   }   static getDerivedStateFromError ( error ) {     ...
Read more