Components in Angular


Components:
Component is a collection of htmls, css, type scripts etc, which displayed on browser. Whenever you create a component in Angular few default files will be created as below.

















Few files like app.module.ts are created by default in Angular application. If you open up the app.module.ts file, it has some libraries which are imported and also a declarative which is assigned the app component as follows



Add a New Component: You can add new component with command

ng generate component sharjeelswork

The following files are created in the sharjeels-work folder






















To register this component you need to mention this in Router inside app.module.ts file

Basically RouterModule.forRoot([{… }]) is an array which hold the route information for all component available in Angular application.























In this way you can run your component in browser. Just build your solution using command    ng build and serve the application using command ng serve.




ng serve This command will serve Angular application and run on port 4200 which is a default port for angular app. You can also change port no if required in case of running more than one app on same system.
ng serve –port 4201










Type http://localhost:4201 in your browser and press enter. After changes regarding router explained in earlier lines you can directly write the URL for newly created component.
http://localhost:4200/sharjeels-work














In this way you can create a new component in angular application and use in any module of your application.



Happy Learning!!!


















Comments

Post a Comment

Popular posts from this blog

Error : DependencyManagement.dependencies.dependency.(groupId:artifactId:type:classifier)' must be unique: com.adobe.aem:uber-jar:jar:apis -> version 6.3.0 vs 6.4.0

Image
I got above error after adding dependency in Maven POM xml file placed under newly created AEM arch type and running command  mvn -PautoInstallPackage clean install . Error : DependencyManagement.dependencies.dependency.(groupId:artifactId:type:classifier)' must be unique: com.adobe.aem:uber-jar:jar:apis -> version 6.3.0 vs 6.4.0 After google and gone through few article I got command ( mvn -PautoInstallPackage -Padobe-public clean install) . Once I run this command this issue with jar compatibility was resolved. Happy Learning!!!
Read more

ERROR Exception while handling event Sitecore.Eventing.Remote.PublishEndRemoteEventException: System.AggregateExceptionMessage: One or more exceptions occurred while processing the subscribers to the 'publish:end:remote'

I was getting below error while working with cache management on CM and CD server. Actually my code was working fine on CM server but I was not able to access or clear cache object on CD server because of wrong event selection.  PID[18108] Error       ManagedPoolThread #3 16:24:16 ERROR Exception while handling event Sitecore.Eventing.Remote.PublishEndRemoteEventException: System.AggregateExceptionMessage: One or more exceptions occurred while processing the subscribers to the 'publish:end:remote' event.Source: Sitecore.Kernelat Sitecore.Events.Event.EventSubscribers.RaiseEvent(String eventName, Object[] parameters, EventResult result)at Sitecore.Events.Event.RaiseEvent(String eventName, Object[] parameters)at Sitecore.Eventing.Subscription`1.Invoke(Object instance, EventContext context)at Sitecore.Eventing.EventProvider.RaiseEvent(Object event, Type eventType, EventContext context) Above error comes due to wrong event args access in CD server. T...
Read more

Dot Net Core Application Packaging using Octo

Image
Octo.exe is a command line tool that interacts with the Octopus Deploy REST API and includes a pack command to create packages either as Zip or NuGet packages for deployment with Octopus. Installation We recommend installing Octo as a global tool using .NET Core which makes Octo available as a command via the .NET CLI. If you have the .NET Core 2.1.300 SDK available you can install Octo onto a machine or build agent as a global tool with the following command: dotnet tool install Octopus.DotNet.Cli –global Publish your application There are two ways to publish your dot net core application. One you can do from command line and other from Dote net solution it self. Command Line Dot net publish source/sharjeelsWorkCore.Web --output published-app --configuration Release dotnet publish F:\RSI\SharjeelsWork\RD\Core\sharjeelsWorkCore\sharjeelsWorkCore\sharjeelsWorkCore.csproj --output published-app --configuration Release Dote Net Solution Right c...
Read more