Skip to content
  • Github
  • Facebook
  • twitter
  • About Us
  • Contact Us
  • Privacy Policy
  • Terms & Conditions
  • Site Map

XpertPhp

Expertphp Is The Best Tutorial For Beginners

  • Home
  • Javascript
    • Jquery
    • React JS
    • Angularjs
    • Angular
    • Nodejs
  • Codeigniter
  • Laravel
  • Contact Us
  • About Us
  • Live Demos
Angular 11 Create Component Example

Angular 11 Create Component Example

Posted on December 26, 2020December 15, 2022 By XpertPhp

Today, we will explain to you how to create a component in angular 11(Angular 11 Create Component Example). In this example, you will learn how to create components using the ng generate component command.

You can easily create the new components using the Angular CLI command. so you can follow steps for creating components using Angular CLI.

Create new angular app

We will create a new angular app using the following command.

1
2
ng new myapp
cd myapp

ng generate component

first, open the command prompt or terminal and create the component using the below command.

1
ng generate component home

You can also execute the following command.

1
ng g c home

The above command will generate 4 files in the “src/app” directory.

1
2
3
4
src/app/home/home.component.ts      
src/app/home/home.component.html    
src/app/home/home.component.css      
src/app/home/home.component.spec.ts

If want to add code or write edit some code in these 4 files then you can do that. when are you create the component using the command line then that component automatically added in the app.module.ts file.

See also  Angular 11 CRUD Application Example Tutorial
Angular Tags:angular 11

Post navigation

Previous Post: Angular 11 Add Class Dynamically Example
Next Post: How to add font awesome in angular 11

Latest Posts

  • Laravel 12 Ajax CRUD Example
  • Laravel 12 CRUD Example Tutorial
  • How to Create Dummy Data in Laravel 11
  • Laravel 11 Yajra Datatables Example
  • Laravel 11 Ajax CRUD Example
  • Laravel 11 CRUD Example Tutorial
  • Angular 15 CRUD Application Example Tutorial
  • Laravel 10 Form Validation Example Tutorial
  • Angular 15 Custom Form Validation Example
  • Laravel 10 Send Email Example Tutorial

Tools

  • Compound Interest Calculator
  • Hex to RGB Color Converter
  • Pinterest Video Downloader
  • Birthday Calculator
  • Convert JSON to PHP Array Online
  • JavaScript Minifier
  • CSS Beautifier
  • CSS Minifier
  • JSON Beautifier
  • JSON Minifier

Categories

  • Ajax
  • Angular
  • Angularjs
  • Bootstrap
  • Codeigniter
  • Css
  • Htaccess
  • Interview
  • Javascript
  • Jquery
  • Laravel
  • MongoDB
  • MySql
  • Nodejs
  • Php
  • React JS
  • Shopify Api
  • Ubuntu

Tags

angular 10 tutorial angular 11 ci tutorial codeigniter 4 image upload Codeigniter 4 Tutorial codeigniter tutorial CodeIgniter tutorial for beginners codeigniter with mysql crud operation eloquent relationships file upload File Validation form validation Image Upload jQuery Ajax Form Handling jquery tutorial laravel 6 Laravel 6 Eloquent Laravel 6 Model laravel 6 relationship laravel 6 relationship eloquent Laravel 6 Routing laravel 7 Laravel 7 Eloquent laravel 7 routing laravel 7 tutorial Laravel 8 laravel 8 example laravel 8 tutorial laravel 9 example laravel 9 tutorial Laravel Framework laravel from scratch laravel social login learn jquery nodejs pagination payment gateway php with mysql react js example react js tutorial send mail validation wysiwyg editor wysiwyg html editor

Copyright © 2018 - 2025,

All Rights Reserved Powered by XpertPhp.com