Angular 4 Components | Angular 4 Tutorial For Beginners | Learn Angular 4 | Edureka

Oct 6, 20178 likes2,931 views

This Angular 4 tutorial will introduce you to angular 4 components. To watch the YouTube videos in this Angular 4 tutorial playlist, click here: https://www.youtube.com/watch?v=R4wGCHzn6-Q&list=PL9ooVrP1hQOF4aDuqaWYWSuj1isPF6HHg.

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Edureka
Free Angular Course For Beginner

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Angular Tutorial - Road Covered So Far
Angular
Introduction
Angular Install &
Project Structure
Angular
Components
Angular
Data Binding
Angular
Directives
Angular &
angularFirebase
Angular
CRUD App
Angular
Services
Angular
Forms
Angular
Routing
1
10 9 8 7 6
1 2 3 4 5
678910

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
AppComponent: The Root Component

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Key Points:
❖ index.html is the file that is served by the server and gets rendered in the browser
❖ index.html links the styles and other javascript files which are required for running the app
❖ AppComponent is the root component which gets loaded first.
❖ Typically, all of the other custom components are nested inside AppComponent.
❖ AppComponent is inserted in the body of index.html using custom “app-root” element
❖ Selector tag is used to load a component’s instance.

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
What are Components?

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
What are Components?
“A component controls a patch of screen real estate that we could call a view,
and declares reusable UI building blocks for an application.”

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Component’s Example

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Component’s Example
SIDE-BAR
COMPONENT
< >

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Component’s Example
SIDE-BAR
COMPONENT
< >
COURSES COMPONENT
< >

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Component’s Example
SIDE BAR
< >
COURSES
< >
SEARCH BAR < > NAV-BAR < >

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Component’s Example
SIDE BAR
COMPONENT
< >
COURSES COMPONENT
< >
SEARCH BAR COMPONENT < >HEADER COMPONENT
< >

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Components Parent/Tree Structure
App Component
Sidebar Component Courses Component Header Component
Search-bar Component Nav-bar Component

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
What are Components?
Template or
View
Component
< >
“A component controls a patch of screen real estate
that we could call a view, and declares reusable UI
building blocks for an application.”
Business Logic

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Creating a Component

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Creating a Component
@Component({
……
})
Component
{ }
MyClass Decorator
A simple
TypeScipt Class
Metadata for
the class I am Component

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Creating a Component
Component
{ }
A simple
TypeScipt Class
Metadata for
the class
+

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Demo

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Angular App Bootstrapping

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Angular App Bootstraping
main.ts AppModule AppComponent
bootstraps bootstraps
1 2
❖ Main TypeScripts file from
where the execution begins
❖ Initializes the platform browser
where the app will run and
bootstraps AppModule
❖ Root Module of the angular app
❖ Bootstraps AppComponent and
inserts it into the index.html
host web page
❖ Root Component under which
other components are nested
❖ First component to be inserted
into the browser DOM

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Why Angular Apps are
Bootstrapped?

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Why Angular Apps are Bootstrapped?
ANGULAR is NOT a FRAMEWORK for creating WEB-ONLY APPLICATIONS
❖ Allows us to write angular app that can be hosted on other
environments.
❖ Import the platform based on the environment.
❖ For example:
@angular/platform-browser-dynamic is used for running the app
on browsers

Angular 4 Components | Angular 4 Tutorial For Beginners | Learn Angular 4 | Edureka

** Edureka AngularTraining: https://www.edureka.co/angular-training** This "Angular 4 Directives" tutorial by Edureka will introduce you to different types of angular directives through practical examples. To watch the YouTube videos in this Angular 4 tutorial playlist, click here: https://www.youtube.com/watch?v=R4wGCHzn6-Q&list=PL9ooVrP1hQOF4aDuqaWYWSuj1isPF6HHg

Selenium Page Object Model Using Page Factory | Selenium Tutorial For Beginne...Edureka!

ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React...Edureka!

Introduction To Angular 4 - J2INader Debbabi

This document provides an introduction and overview of Angular 4 including: - Angular is an open-source JavaScript framework used to build single page web applications. - It discusses TypeScript, single page applications, the development environment setup, and basic application structure in Angular. - The main building blocks of an Angular application are modules, components, directives, and services - which are defined through TypeScript classes and metadata.

Smart IoTt on OSGi with Apache Openwhisk - C Ziegeler & D Bosschaertmfrancis

The document discusses using OSGi and Apache OpenWhisk together for IoT applications. OSGi provides a unified platform and service registry for IoT gateways and devices. It includes a device abstraction layer to support different protocols. OpenWhisk enables serverless cloud functions that can be triggered by IoT events. The combination allows integrating machine learning predictions from OpenWhisk with local device logic in a seamless way.

Sst hackathon expressAeshan Wijetunge

Express is a popular Node.js framework that provides scaffolding for building web applications in an organized manner. It allows adding middleware functions and templating engines like Dust.js to add dynamic content. The document demonstrates how to use the Request module to call an external weather API, parse the JSON response, and render the data in a Dust template to present weather information for different cities. It concludes by discussing deploying the application to production platforms like Bluemix.

AbarCloud OverviewAli Khajeh-Hosseini

This document summarizes the background of AbarCloud founders, including their previous work experience. It then provides an overview of containers as a service and infrastructure as a service using Docker and Kubernetes. It walks through deploying a simple Ruby hello world app on AbarCloud's platform to demonstrate how Docker builds the image and Kubernetes deploys and manages the containerized app. It concludes by encouraging people to use Docker and Kubernetes and to contact AbarCloud if interested in using their platform for internship projects.

Leveraging the Latest OSGi R7 Specifications - C Ziegeler & D Bosschaertmfrancis

OSGi Community Event 2017 Presentation by Carsten Ziegeler and David Bosschaert [Adobe] Whether you're building large enterprise applications or writing code for IoT devices, the new R7 release has a lot to offer for you. Learn in this session about the various new and updated specifications and how they will make your developer life easier. Starting with new features in Declarative Services for component development, dealing with configurations, using JAX-RS with OSGi and finishing with useful libraries for object conversion and event streaming, this session is packed with information for OSGi development.

codeBeamer Eclipse DemoCamp-23.11.2010Intland Software GmbH

The document discusses the benefits of using distributed version control systems (DVCS) like Git and Mercurial for software development. It highlights advantages like better support for distributed teams, easier branching and merging, and more robust workflows. The document also provides an example of how a company implemented DVCS with Mercurial and Eclipse plug-ins for improved process improvement in distributed software development across locations in Europe and Asia.

Java 9 New Features | Java Tutorial | What’s New in Java 9 | Java 9 Features ...Edureka!

Developing a Demo Application with Angular 4 - J2INader Debbabi

IMMERSE'16 Introduction to adobe experience manager back endAdobeMarketingCloud

Jigsaw what the Heck Happens Now - N Bartlettmfrancis

OSGi Community Event 2017 Presentation by Neil Bartlett [Paremus] By the time you see this talk, Java 9 should have been released with its flagship feature: the Java Platform Module System (JPMS), also known as Jigsaw. It goes without saying that Jigsaw will have a big impact on the entire Java ecosystem, and particularly on OSGi developers who have an 18 year head start on modularising Java applications. However, while OSGi and Jigsaw ostensibly solve similar problems, they do so in very different ways. In this talk I will address questions such as... Does JPMS make OSGi obsolete? How can OSGi and JPMS work together? Will OSGi change to take advantage of JPMS features? What will the future look like for OSGi and Java?

AswinAswinT6

Aswin T has 4 years of experience as a DevOps engineer at Apple, where he focuses on automating the deployment of infrastructure to cloud environments across 30+ accounts using tools he has built. His technical skills include Java, Golang, Python, Groovy, Spring, SpringBoot, Angular, MySQL, SQL Server, AWS, Git, Maven, and Gradle. He has experience building automation frameworks in Groovy and Golang to provision AWS resources, as well as Progressive Web Applications to monitor environments and track deployment details. He is AWS Certified as a Solutions Architect Associate and Cloud Practitioner.

Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...Roel Hartman

The document discusses how to build a hybrid mobile application using Oracle Application Express (APEX) and the Cordova framework. It provides steps on creating an APEX application, embedding it within a Cordova application, and enabling access to device functionality like contacts through Cordova plugins. The document demonstrates how to load, download and sync contacts between the APEX database and the device's contacts using REST APIs and JavaScript.

Implement and manage build infrastructureEng Teong Cheah

This document discusses Azure Pipelines and provides information on key concepts like agents, agent pools, and Microsoft-hosted vs self-hosted agents. It explains that agents are virtual machines that jobs can run on, and agents can be organized into pools. Microsoft-hosted agents are short-lived VMs that Azure manages, while self-hosted agents are customer-managed VMs that can persist caches between runs. The document also covers typical uses for creating agent pools and security roles that govern agent pool access.

2 Guide MySQL Cloud Service Provisioning.Virve Kettunen

Docker at SourceLair | Paris Kasidiaris | 1st Docker Crete Meetup Alexandra Karapidaki

Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Edureka!

This document outlines an AngularJS certification training agenda that covers directives. It defines directives as classes that extend HTML and transform the DOM. There are three types of directives: components, structural directives, and attribute directives. Built-in directives like NgFor and NgIf are covered, which add and remove elements. The document demonstrates how to create a custom attribute directive by using the @Directive decorator and accessing native DOM elements.

Big Data Use Cases | Hadoop Tutorial for Beginners | Hadoop Training | EdurekaEdureka!

What Is DevOps? | Introduction To DevOps | DevOps Tools | DevOps Tutorial | D...Edureka!

Artificial Neural Network Tutorial | Deep Learning With Neural Networks | Edu...Edureka!

This Edureka "Neural Network Tutorial" tutorial will help you to understand the basics of Neural Networks and how to use it for deep learning. It explains Single layer and Multi layer Perceptron in detail. Below are the topics covered in this tutorial: 1. Why Neural Networks? 2. Motivation Behind Neural Networks 3. What is Neural Network? 4. Single Layer Percpetron 5. Multi Layer Perceptron 6. Use-Case 7. Applications of Neural Networks

Docker Compose | Containerizing MEAN Stack Application | DevOps Tutorial | Ed...Edureka!

Android Studio Tutorial For Beginners -2 | Android Development Tutorial | And...Edureka!

Power BI Training | Getting Started with Power BI | Power BI Tutorial | Power...Edureka!

Bitcoin Blockchain Explained | Understanding Bitcoin and Blockchain | Blockch...Edureka!

Docker Swarm For High Availability | Docker Tutorial | DevOps Tutorial | EdurekaEdureka!

The document discusses Docker containers, Docker Swarm, and achieving high availability with Docker Swarm. It defines a Docker container as an isolated application platform containing everything needed to run an application. Docker Swarm is described as a technique to create and maintain a cluster of Docker engines to provide high availability, load balancing, and scaling of services. The document demonstrates setting up a Docker Swarm cluster with two nodes and deploying an Angular application across the nodes for high availability.

Cloud Computing Tutorial For Beginners | What is Cloud Computing | AWS Traini...Edureka!

More Related Content

What's hot (13)

AbarCloud OverviewAli Khajeh-Hosseini

Leveraging the Latest OSGi R7 Specifications - C Ziegeler & D Bosschaertmfrancis

codeBeamer Eclipse DemoCamp-23.11.2010Intland Software GmbH

Java 9 New Features | Java Tutorial | What’s New in Java 9 | Java 9 Features ...Edureka!

Developing a Demo Application with Angular 4 - J2INader Debbabi

IMMERSE'16 Introduction to adobe experience manager back endAdobeMarketingCloud

Jigsaw what the Heck Happens Now - N Bartlettmfrancis

AswinAswinT6

Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...Roel Hartman

Implement and manage build infrastructureEng Teong Cheah

2 Guide MySQL Cloud Service Provisioning.Virve Kettunen

Docker at SourceLair | Paris Kasidiaris | 1st Docker Crete Meetup Alexandra Karapidaki

Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Edureka!

AbarCloud OverviewAli Khajeh-Hosseini

Leveraging the Latest OSGi R7 Specifications - C Ziegeler & D Bosschaertmfrancis

codeBeamer Eclipse DemoCamp-23.11.2010Intland Software GmbH

Java 9 New Features | Java Tutorial | What’s New in Java 9 | Java 9 Features ...Edureka!

Developing a Demo Application with Angular 4 - J2INader Debbabi

IMMERSE'16 Introduction to adobe experience manager back endAdobeMarketingCloud

Jigsaw what the Heck Happens Now - N Bartlettmfrancis

AswinAswinT6

Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...Roel Hartman

Implement and manage build infrastructureEng Teong Cheah

2 Guide MySQL Cloud Service Provisioning.Virve Kettunen

Docker at SourceLair | Paris Kasidiaris | 1st Docker Crete Meetup Alexandra Karapidaki

Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Edureka!

Viewers also liked (20)