#12 Create Component using Angular CLI | Angular Components & Directives | A Complete Angular Course
Summary
TLDRThis lecture explains how to create Angular components manually and with Angular CLI. It starts by detailing the process of defining a component class, adding the view template and styles, and registering the component manually in the app module. The instructor then introduces the Angular CLI command 'ng generate component' to automate these tasks, showing how it speeds up development. The lecture also covers fixing a compilation error due to a missing Bootstrap reference and demonstrates the refactoring of HTML into child components, styling them, and verifying results in the browser.
Takeaways
- 🔧 Manually creating components in Angular involves defining a class, decorating it with @Component, and registering it in the app.module.ts.
- ⚙️ Using the Angular CLI simplifies component creation by automating the generation of the component class, view template, and registration in the main module.
- 🛠️ The command 'ng generate component [component name]' automatically creates a new component with the required files and registers it in the app module.
- 🗂️ Removing unnecessary dependencies (like Bootstrap) requires cleaning up references in the angular.json file to prevent compilation errors.
- 🖥️ The CSS and HTML for a component are scoped to that component, meaning styles in one component won't affect another unless applied globally.
- 🚀 Using Angular CLI for component generation speeds up the development process by automating tasks such as registering components.
- 📁 Child components can be created inside parent component folders and referenced within the parent’s HTML for a cleaner structure.
- 🔄 Refactoring large HTML sections into separate components makes code more modular and easier to manage, as shown with the top menu and main menu components.
- 🎨 Styles for components can be moved from parent components to their respective child component CSS files for better encapsulation.
- 📜 The Angular CLI ensures that any new components are automatically declared in the main module, reducing manual intervention.
Q & A
What is the purpose of the @Component decorator in Angular?
-The @Component decorator is used to define an Angular component. It decorates a class by providing metadata about the component, such as the selector, template, and styles.
How do you manually create and register a component in Angular?
-To manually create a component, you define a class decorated with the @Component decorator. Then, register the component by adding it to the 'declarations' array in the appmodule.ts file.
What is the Angular CLI command to generate a component?
-The Angular CLI command to generate a component is 'ng generate component <component-name>'. This can also be shortened to 'ng g c <component-name>'.
What tasks are automated by using the Angular CLI to generate a component?
-When using Angular CLI, it automates the creation of the component class, view template, stylesheet, and also registers the component in the app module. This eliminates the need for manual registration.
How do you fix the error caused by uninstalling Bootstrap in an Angular project?
-The error occurs because the Angular.json file is still referring to the Bootstrap CSS file. To fix this, you need to remove the reference to 'bootstrap.min.css' from the 'styles' array in the Angular.json file.
What happens if you try to use a component selector without importing its CSS styles?
-If you use a component selector without importing its specific CSS styles, the HTML will be rendered but without any styles being applied. This is because Angular's CSS is scoped to each component, and styles are not applied globally unless specified.
How can global styles be applied to all anchor elements in an Angular project?
-To apply global styles to all anchor elements, you should add the necessary styles for the 'a' tag inside the 'styles.css' file. This will apply the styles globally across all components.
Why would you refactor the HTML inside a component?
-Refactoring the HTML in a component helps to organize the code better. For example, separating different sections like 'top menu' and 'main menu' into their own components improves maintainability and clarity.
How do you handle the CSS styles for child components in Angular?
-In Angular, CSS styles are scoped to individual components. If a child component requires specific styles, you need to move those styles from the parent component's CSS to the child component's CSS file.
Why don't you need to manually declare a component when using Angular CLI to create it?
-When using Angular CLI, it automatically declares the component in the 'declarations' array of the app module. This is one of the conveniences of using CLI, as it speeds up development by handling this task for you.
Outlines
🛠️ Introduction to Angular Components
The paragraph provides a review of creating Angular components manually, explaining how to define view templates, style the view, and register the component within the app module using the `@Component` decorator. It then introduces Angular CLI as a more efficient alternative for generating components. Using the `ng generate component` command, Angular CLI automates the creation of the component class, view template, style sheet, and registration in the app module, eliminating the need for manual setup.
🚀 Fixing Bootstrap Errors and Using Angular CLI
The speaker addresses an error in the project caused by an uninstalled Bootstrap reference in the `angular.json` file, explaining how to remove the unused path. After correcting this, the `ng serve` command is run to verify that the project compiles successfully. Following this, a new component named 'top header' is created using the Angular CLI (`ng generate component top-header`). The resulting component files are then reviewed and the `app-top-header` selector is adjusted to `top-header`. HTML and CSS styles are added to the component, demonstrating how Angular CLI automatically registers components in the app module.
📋 Creating and Styling the Top Menu Component
The focus shifts to creating a 'top menu' component, using the `ng generate component top-menu` command. After the component is generated, the default test file is deleted. HTML and CSS content for the top menu is then extracted from the header component and added to the top menu's template and stylesheet files. The speaker highlights that styles defined in one component’s CSS file are not applied to child components, demonstrating this with a missing CSS issue. The styles are then successfully transferred and applied in the appropriate component files, resulting in a correctly rendered top menu.
⚙️ Creating the Main Menu Component and Removing the Search Bar
The paragraph explains how to create a 'main menu' component in a similar manner as the top menu, using the Angular CLI. HTML content for the main menu is extracted from the header component and added to the main menu’s template. The associated CSS is also moved to the new component’s CSS file. The speaker points out a slight alignment issue and resolves it by making additional CSS adjustments. Additionally, an unnecessary search bar is removed from the header component and its styles are cleaned up. The speaker concludes by noting that the newly created components are automatically registered in the app module by Angular CLI.
Mindmap
Keywords
💡Component
💡Angular CLI
💡Decorator
💡Template
💡AppModule
💡ng generate
💡CSS Styles
💡Child Component
💡Selector
💡Module Declarations
Highlights
Learned how to create and style components in Angular manually and using Angular CLI.
Explained the process of creating a component class decorated with @Component and how to register it in app.module.ts.
Introduced the Angular CLI command 'ng generate component' to automate component creation.
Demonstrated how Angular CLI generates a component class, view template, and stylesheet automatically.
Resolved an Angular compilation error caused by an incorrect reference to the Bootstrap file in angular.json.
Showed how to use Angular CLI to create a top-header component and adjust its selector and template.
Explained the automatic registration of a component in the declarations array of app.module.ts using Angular CLI.
Described the process of refactoring HTML by separating top navbar and main navbar into separate components.
Discussed how to organize child components by creating top menu and main menu components inside the header component.
Showed how to move the top menu's HTML and CSS from the header component to its respective component files.
Highlighted that Angular component CSS styles are scoped to the component and do not apply to child components.
Explained the need to copy relevant CSS styles to a component's specific CSS file for them to apply.
Demonstrated global CSS by moving anchor styles from the component-specific CSS file to the global style.css.
Explained the process of cleaning up unused HTML and CSS for better maintainability.
Reiterated the benefits of using Angular CLI for speeding up development by automating component registration and setup.
Transcripts
in the last few lectures we learned
about component in great detail we
learned how to create a component how to
define the view template for that
component and how to style that view
template
so if I go to the source folder inside
this Source folder we have this app
folder and in there we created this
header component so if I go to this
header component.ts file there we have
this header component class decorated
with at component decorator
now we created this header component
manually by defining this header
component class decorating it with at
component decorator and then registering
this header component in the
appmodule.ts file basically inside this
declarations array so here you can see
we are registering we are declaring this
header component which we created
now we can also create a component using
angular CLI
and for that we simply need to run this
command
so the command is NG generate component
and the component name
now what this command will do is it will
first create a component class decorated
with at component decorator
it will also generate the view template
and style sheet for that component
and it will also register that component
class in the main module so we don't
have to do anything manually here in
order to create a component
everything will be taken care by angular
CLI
so let's see how we can create a
component using this angular CLI command
but before that let's first go ahead and
let's fix the error which we introduced
in our last lecture
so in the last lecture from this angular
application we uninstalled bootstrap
right and when we uninstalled bootstrap
we are still referring to that bootstrap
file in our angular.json file basically
here inside this Styles array so you see
we are still referring to that
bootstrap.min.css file inside this
angular.json
and because of this what is happening is
when I am trying to compile this project
I am getting this error so the error
says can't resolve this file path
in this project and because of that the
compilation is failing
so in order to fix this problem all we
have to do is we have to go back to vs
code and from the angular.json file from
within this Styles array we need to
remove that path we need to remove that
reference
and with this if I save the changes now
our angular application should compile
properly without any errors so if I go
back to command prompt
here let's first go ahead and let's stop
this process by pressing Ctrl C
let me clear the command prompt here and
then let's again go ahead and let's run
this NG serve command
and now we should not have any
compilation errors
so now you can see the project is
compiling successfully and we don't have
any compilation errors
all right now let's go back and let's go
ahead and let's create a new component
using angular CLI for that
let's open this terminal
and what we want is we want to create a
new component called top header
so let me first clear the terminal here
and in order to create this top header
component we are going to use angular
CLI so here we need to type the command
NG generate
insert we can also write it as ngg
and we want to generate a component so
we need to specify that
or in short we can also write it as C
for component and then the name for the
component so I'm going to call this
component top header
let's press enter and what this command
will do is it will create a folder with
the name top header and inside that it
will generate all the component related
files
so now if I go to Source folder
in the source folder if I go to app
folder there you will see inside this
app folder we have another folder called
top header and inside this top header
folder we will have all the files
related to the top header component
so here we have the top header
component.ts file there we have this top
header component class decorated with
ADD component decorator
in there we have the selector called as
app top header but instead of calling it
app top header I will simply call it top
header
okay and wherever we will use this top
header selector there this HTML file
will be rendered so this is the view
template for this top header component
so let's go to this top header
component.html file in there currently
we simply have one paragraph element so
wherever we will use this top header
selector there that paragraph will be
rendered okay
and we also have top header
component.css file inside this we can
write some CSS for our top header
component
then we also have this top header
component dot spec.ts file basically it
is a file inside which we can write some
unit tests for our component but for now
I don't want to worry about writing unit
tests so what I will do is I will simply
go ahead and I will delete this file
okay now let's go ahead and let's use
this top header component in our app
component so I'll copy this selector
let's go to app component.html and there
before this app header
let's use this top header
okay so for this top header
this paragraph will be rendered let's
see that in web page so let's go back to
the web page
and there you will notice that paragraph
has been rendered
but instead of rendering a paragraph
here I want to display a top header now
in order to save some time
I have already written some HTML for the
top header so I'll copy that HTML from
here
let's go back to vs code and here
instead of that paragraph let's paste
that HTML
here I don't need this ID for now so
I'll remove it
so this is a very simple HTML where we
have a div with this class ecard top
header in there we have a paragraph with
this value and then we are also
displaying a font awesome icon
so let me save these changes here let's
go back to the web page
and there you will see that paragraph
okay
now in order to style this top header
again I have written some CSS so let's
grab that CSS from here
let's go back to vs code
and let's go to
top header component.css and there let's
paste that CSS let's save the changes
again
let's go back to the web page
and this is how our top header looks
like
okay
now you might ask okay using the angular
CLI we created the component but when we
created the component manually that time
we also had to register it in the main
module in the app module class
right but we have not done that for this
top header component well that's because
after creating this top header folder
and generating the files for the top
header component angular CLI will also
declare that component in the main
module so if I go to this app module.ts
file there you will see that this top
header component that has already been
declared inside this declarations array
so it has been imported from this file
path and then it has been added to this
declarations array we don't have to do
it manually
so all these manual tasks are taken away
from us when we create a component using
angular CLI
and this helps us in speeding up the
development process and that's the
advantage of using angular CLI for
creating the angular component
all right
let me go ahead and let me close these
files now
okay
now what I also want is if I go to this
header component and if I go to this
header component HTML file you will see
that here in this header component we
have lot of HTML so what I want is I
want to refactor this HTML
if I go to the web page
there you will see we have two navbars
so the first one let's say is top navba
and this one is the main navba so what I
want is I want to create separate
components for this top nav bar or maybe
we can call it top menu and also the
main menu
so let's go ahead and let's create
components for these two menus
now let me go ahead and let me clear the
terminal first
so the top menu and the main menu these
two components are going to be the child
component of this header component
because we are going to use those
components inside this header component
okay so since these components are going
to be the child component of this header
component what we need to do is
we need to move inside this header
component first for that we can type the
CD command So currently we are in the
project directory basically this
directory from here we need to go to
Source folder from The Source folder we
need to go to app folder and from the
app folder we need to go to header
folder so we can say
Source slash app slash header
if I press enter
now we are in the header folder and
inside that header folder we want to
create a new component for that again we
can use NG generate command in short you
can also write it as ngg and we want to
generate a component
and I'm going to call this component
top menu
let's press enter
and now this command should generate the
top menu component with all the required
files
so it has been generated and in the
header folder you will see a new folder
called top menu has been created and in
there we have all the component related
files again let me go ahead and let me
delete this spec.ts file we don't need
it for now
okay so if I go to topmanycomponent.ts
file there we have this top menu
component class decorated with at
component decorator and there the
selector is app top menu again I'll
simply call it as
top menu
for that the view template is this HTML
file and style sheet is this HTML file
so inside this I want to write the HTML
for top menu basically the HTML for
this menu
so I'll copy it from header
component.html
so this is the top menu let me cut it
from here
and I will specify a comment here
top menu so that letter I will add that
top menu component selector after this
comment
so let me go to
topmanycomponent.html instead of this
paragraph
let me paste that HTML here
and then we also want to design this
HTML
and we have the CSS for this HTML file
inside header component.css file
so here if I scroll up we have the CSS
for that class ecard top bar now if I
don't copy this CSS class from here and
paste it inside
topmanycomponent.css this style will not
get applied on that div so in the top
menu component.html we have this div
with this ecard topper class name
okay but in the CSS file we don't have
any style for that class but we have
some Styles defined for that CSS class
in header component dot CSS file
but we have learned that this CSS it
will be only applied to the view
template of header component it will not
get applied to the view template of any
other component and just to prove that
let me go ahead and let me copy the top
menu selector from here
and
let's use it in the header
component.html so here let's go ahead
and let's use it
okay let's save the changes
let's go back to the web page
and there you will see that the top menu
is being displayed but there is no CSS
style applied on that
and this is what we learned earlier
so even though there is a CSS style
defined for that CSS class in the header
component.css file it will not get
applied on that because that is a
completely different component this top
menu component it is a different
component than header component even
though it is a child component of this
header component this CSS style is not
getting applied there
so what I will do is I will cut it from
here
let's go to top menu component.css file
and there let's paste that CSS
save the changes let's go back to the
web page
and now you will see that some Styles
have been applied here so basically now
it is displayed in the right hand side
but again the underlines for these links
are still there and the color of these
links are still blue
that's because we also need to take
these Styles which we have defined for
the anchor element basically this style
and we need to put it inside the top
menu component.css file but instead of
specifying this style here
so I can specify it here and I can save
it and if you go to the web page again
there those styles are there but then
for these anchor elements those styles
are gone
so what we want is we want to apply
these tiles for all the anchor elements
we want to specify these Styles globally
for all the anchor elements so what I
will do is I will take this style for
this anchor element from here
and I will add that CSS style in the
style.css file so that it will be
applied globally
so now on all the anchor elements in
this angular project these Styles will
be applied so if I save the changes now
and if we go back
now those styles are applied on these
menu items also these links also and
these links also
okay so in this way we separated the top
menu component from the header component
so if I go back
let me close this topmany component.css
file let's also close this style.css
file
and let me close this top many
component.html file we are not going to
do anything in this file right now
and if I go to this header
component.html file now it is a bit
leaner so now to display the top menu we
only have one line of HTML
in the same way I also want to separate
this main menu into a separate component
so again let me go ahead and let me
clear the terminal here and again we
want to create this new component inside
the header component only because this
main menu component it is also going to
be a child of header component
so again I will say NG generate
component and I'm going to call this
component main menu
let's press enter
so again it should generate all the
required files for the main menu
component all right it has been
generated a folder has been created here
called main menu
from here let me first go ahead and let
me delete this spec.ts file
if I go to main menu component.ts there
you will see we have this main menu
component class
decorated with a component decorator it
has this selector template URL and style
urls so now let's go to header
component.html and let's cut this HTML
from here
and here we want to display main menu
okay
now let's go to main menu component.html
instead of this paragraph let's paste
that HTML so here we have a div with
this class ecart menu so let's go ahead
and let's copy the CSS for this class
from header component dot CSS
so somewhere we should have the main
menu okay this ecart menu let's cut it
from here
let's go to main menu component.css file
in there let's paste it
let's see if the changes let's go to
main menu component.ts file from there
let's get the selector again instead of
calling it app main menu I'll simply
call it main menu
I'll copy this selector
and again let's go to
headercomponent.html and after this
comment
let's use that selector
okay with this let's save the changes
let's go back to our application
and you can see that main menu
all right it looks great but for some
reason it has shifted a bit left but
that's okay for now
let's go back to vs code again let's go
to headercomponent.html and from here I
also want to remove this search bar so
so
in the web page
we also have this search bar I don't
want it in the header
so I'll simply go ahead and I will
remove it from here
okay and from the header component.css
let's also go ahead and let's remove the
CSS for that search bar so we want to
remove this ecart search bar
record search box
and ecard search button
let's go to the web page
and that search bar has been removed
all right so this is all from this
lecture in this lecture we learned how
we can create an angular component using
angular CLI and also if I go back you
will notice that these two components
which we have just created this main
menu and top menu if I go to
appmodule.ts file there you will notice
that those classes are automatically
declared here inside this declarations
array
okay so when we use angular CLI we don't
have to do these things manually angular
CLI will take care of that
関連動画をさらに表示
#07 What is a Component | Angular Components & Directives| A Complete Angular Course
#09 Styling View Template | Angular Components & Directives| A Complete Angular Course
#03 Editing the First Angular Project | Getting Started with Angular | A Complete Angular Course
#02 Creating a new Angular Project | Getting Started with Angular | A Complete Angular Course
#08 View Template of Component | Angular Components & Directives| A Complete Angular Course
#04 Angular files and folder structure| Getting Started with Angular | A Complete Angular Course
5.0 / 5 (0 votes)