{"flag":true,"single":true,"pageTitle":"create angular component manually and using CLI, How to add stylesheet","post":{"id":45,"user_id":"1","slug":"create-angular-component-manually-and-using-cli-how-to-add-stylesheet-m5fh","title":"create angular component manually and using CLI, How to add stylesheet","body":"

Components <\/strong>are the building blocks that compose an application. 
A component includes a<\/p>\r\n

    \r\n
  1. TypeScript class with a @Component() decorator,<\/li>\r\n
  2. An HTML template, <\/li>\r\n
  3. styles.<\/li>\r\n<\/ol>\r\n

    The @Component()<\/strong> decorator specifies the following Angular-specific information:<\/p>\r\n

      \r\n
    1. A CSS selector<\/li>\r\n
    2. HTML template<\/li>\r\n
    3. An optional set of CSS styles that define the appearance of the template's HTML elements<\/li>\r\n<\/ol>\r\n

      We need an html, and ts file.<\/p>\r\n

      1. create app\/user\/user.component.html<\/strong><\/p>\r\n

      <h1>Hello User<\/h1><\/code><\/pre>\r\n
      2. create app\/user\/user.component.ts<\/strong> , select selector and html file<\/p>\r\n
      import { Component } from '@angular\/core';\r\n@Component({ \/\/convert class to component\r\n  selector: 'app-user',\r\n  templateUrl: '.\/user.component.html'\r\n})\r\nexport class UserComponent {\r\n}<\/code><\/pre>\r\n
      3. Register component in app\/app.module.ts<\/strong><\/p>\r\n
      import it <\/strong><\/p>\r\n
      import {UserComponent} from '.\/user\/user.component';<\/code><\/pre>\r\n
      add in declarations<\/p>\r\n
      declarations: [\r\n    AppComponent, UserComponent\r\n  ],<\/code><\/pre>\r\n
      4. Goto src\/app\/app.component.html<\/strong><\/p>\r\n
      <div class=\"container\">hello<\/div>\r\n <app-user><\/app-user><\/code><\/pre>\r\n
       <\/p>\r\n
      Your component will be loaded into app-user tag<\/p>\r\n
       <\/p>\r\n
      Create a component using CLI<\/strong><\/p>\r\n
      ng generate component Users<\/code><\/pre>\r\n
      it will create four files , register component, in a folder Users. the .spec file is for testing purpose<\/p>\r\n
      Just add this compoenent to your html file.<\/p>\r\n
       <\/p>\r\n
      In templateUrl we need to pass the path of html file

      In template we can also path the other components<\/p>\r\n
      @Component({ \/\/convert class to component\r\n  selector: 'app-user',\r\n  template: '<app-users><\/app-users>'\r\n})<\/code><\/pre>\r\n
      Stylesheet internal:<\/strong> it will applied to only current component<\/p>\r\n
      @Component({\r\n  selector: 'app-users',\r\n  templateUrl: '.\/users.component.html',\r\n  styles:[`\r\n    .uw{\r\n      background:blue;\r\n    }\r\n  `],\r\n})<\/code><\/pre>\r\n
      template<\/strong>: to add component <\/p>\r\n
      templateUrl<\/strong>: to add external component ie html<\/p>\r\n
      templateUrl<\/strong>: add css to current component<\/p>\r\n
      styleUrls<\/strong>: load external css of compoent<\/p>\r\n
      selector<\/strong>: 'app-user' , render data inside <app-user><\/app-user> TAG<\/strong><\/p>\r\n
      selector:<\/strong>['app-user'] render data inside <div app-user><\/div> ATTRIBUTE<\/strong><\/p>\r\n
      selector:<\/strong>'.app-user' render data inside <div class=\"app-user\"><\/div>  CLASS<\/strong><\/p>\r\n
       <\/p>","category_id":"13","is_private":"0","created_at":"2023-03-24T05:46:09.000000Z","updated_at":"2023-03-24T06:02:06.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"Components are the building blocks that compose an application. A component includes a  TypeScript class with a @Component() decorator, - create angular component manually and using CLI, How to add stylesheet (Updated: March 24, 2023) - Read more about create angular component manually and using CLI, How to add stylesheet at my programming site [SITE]","categories":[]}