Customizing components and directives (Part 4)

Поделиться
HTML-код
  • Опубликовано: 29 ноя 2024

Комментарии • 82

  • @Angular
    @Angular  Год назад +4

    Watch more episodes of Learning Angular→ goo.gle/Learning-Angular

  • @NateReprogle
    @NateReprogle Год назад +9

    There is a section of the video from 7:36 to 7:56 where it is just a white background. Other than that, great series of videos! 😀

  • @m31-p9s
    @m31-p9s 8 месяцев назад +1

    Loving these tutorials! More please!

  • @doctorcocktor1894
    @doctorcocktor1894 Год назад +10

    details.component.css does not exist in the files we've downloaded in VS code

    • @dannyacuna
      @dannyacuna Год назад +1

      any luck wtih this? Having the same issue.

    • @jeverydk
      @jeverydk 6 месяцев назад +3

      The details component i created in part 5. The component does not exist at this point. However, you can create it right away, using the same way we've created components so far:
      Normally we use ng generate component details --standalone ---inline-template
      However you can shorten this with: ng g c details --standalone --inline-template
      as you can shorten component with 'c', you can do the same with 'i' interface and 's' service

    • @MichaelSutcliffe2021
      @MichaelSutcliffe2021 2 месяца назад

      ​@@jeverydk This is a good shout to do! Anyone is having issues like I did when coming across the details css. Just create the component, copy the css so you dont have to come back for it later!

  • @kiranPollard-dz5gc
    @kiranPollard-dz5gc 10 месяцев назад +1

    ng generate component details --standalone --inline-template
    I have added the component and updated the details.css, but I'm able to load the page as mentioned in the video and I don't know where and how to use/import the details.css.

  • @bogdan_the_computer
    @bogdan_the_computer 2 месяца назад

    Thank you for this video. However, links to the app data and styles are not available

  • @ohmegatech666
    @ohmegatech666 2 месяца назад

    Also, this doesn't need to be an interface and should be a type in my opinion. Interfaces in ts should only be used if you need a specific feature of interfaces that types don't have like inheritability or declaration merging which is rare so usually just use types for all data shape definitions

  • @it-patsan-us4719
    @it-patsan-us4719 Год назад +2

    input[type="text"] {
    border: solid 1px var(--primary-color);
    padding: 10px;
    border-radius: 8px;
    margin-right: 4px;
    display: inline-block;
    width: 30%;
    }
    button {
    padding: 10px;
    border: solid 1px var(--primary-color);
    background: var(--primary-color);
    color: white;
    border-radius: 8px;
    } must be replaced with input[type="text"] {
    border: solid 1px blue;
    padding: 10px;
    border-radius: 8px;
    margin-right: 4px;
    display: inline-block;
    width: 30%;
    } otherwise there is no boundary around "Filter by city" and no Search button.
    button {
    padding: 10px;
    border: solid 1px blue;
    background: blue;
    color: white;
    border-radius: 8px;
    }

  • @JoseLopez-uc2hn
    @JoseLopez-uc2hn Год назад +3

    I couldn't get the "details.css" to load. I made the folder "details" and put it inside like in the instructions, but it doesn't load it. I tried linking it in other files and it loads it but the styles are not applied.

    • @jeverydk
      @jeverydk 6 месяцев назад +2

      The details component is created in the next video. For now, type ' ng generate component details --standalone ---inline-template ' in your console and past in the css.

  • @rettaguntadeepak3697
    @rettaguntadeepak3697 11 месяцев назад

    I Could fine any Details CSS so web page images are not aliened properly so to solve this?

  • @hieutrantrung8475
    @hieutrantrung8475 5 месяцев назад

    yeah good tutorial, just back to Angular!

  • @Codeline-Dreamer
    @Codeline-Dreamer Год назад +5

    @10:38 the images should show up, but if you are not using the pre-built files shared in this video and created the project from the scratch with Angular latest version then images will not show unless you import { CommonModule } from '@angular/common'. The component default templates does not include this import and you might see an error if this import is not included. the error i encountered is - NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'app-housing-location' (used in the '_HomeComponent' component template).

    • @annekwaro8895
      @annekwaro8895 Год назад +1

      I still was not able to resolve the issue of displaying images despite importing common modules, and I do not have an error.I even checked my console.

    • @mohsenarshad1588
      @mohsenarshad1588 11 месяцев назад

      Thank you for the tip.
      but I have a question.
      can we use @for syntax and still have the same result?
      because I tried to convert *ngFor to @for(){ } and nothing shows up 😩

    • @Codeline-Dreamer
      @Codeline-Dreamer 10 месяцев назад

      @@annekwaro8895 here is the code -
      import { Component } from '@angular/core';
      import { CommonModule } from '@angular/common';
      import { HousingLocationComponent } from '../housing-location/housing-location.component';
      import { HousingLocation } from '../housinglocation';
      @Component({
      selector: 'app-home',
      standalone: true,
      imports: [CommonModule, HousingLocationComponent],
      template: `

      home works!




      `,
      styleUrl: './home.component.css',
      })
      export class HomeComponent {
      housingLocationList: HousingLocation[] = [
      { ******Data from the Github file*****},];}
      Make sure the images are in the assets > src folder

    • @Etevoldo
      @Etevoldo 9 месяцев назад

      REALLY thank you man, you saved my day

  • @10_Anonymous4
    @10_Anonymous4 9 месяцев назад

    extensions used in vs code that helps you use and type html and typescript snippets easily ?

    • @Guidje
      @Guidje 8 месяцев назад

      i think that the purpouse of the "ng generate" cli command is to generate the boiler plate, isn't it? so i think there's no use of snippets, really

    • @rcbashingfun6852
      @rcbashingfun6852 Месяц назад

      Get the Angular Language Service extension

  • @Kharis-ns2co
    @Kharis-ns2co 16 дней назад

    The css wont work.. how can I fix it please ?

  • @sualk6937
    @sualk6937 4 месяца назад

    Love this guy!

  • @ax4178
    @ax4178 Год назад +5

    is there a details.css file?

  • @daviddzul7537
    @daviddzul7537 10 месяцев назад +1

    Don't forget put app-housing-location into a new section

    • @cscsun3796
      @cscsun3796 8 месяцев назад

      Thank you! This was my problem. If you find housing -location components are not spreaded out in each row(only one component in each row), this is probably your problem because in the css, class="results" defines the layout how many columns you have

  • @TamilDhevadhaiTharunya
    @TamilDhevadhaiTharunya 3 дня назад

    Everything is fine but my pictures are not loading, does anybody has the same issue?

  • @sumedhkapoor3436
    @sumedhkapoor3436 Год назад +3

    House images are missing in the assets folder of the zip file.

    • @Angular
      @Angular  Год назад

      We're updating that to fix this, but for now, you can find the assets here:
      github.com/angular/angular/tree/main/aio/content/examples/first-app-lesson-00/src/assets

    • @FullStackDev-ee7ku
      @FullStackDev-ee7ku 6 месяцев назад +4

      @@Angular There are still no images there :(

  • @9delta11
    @9delta11 Год назад +3

    From where do we get the missing house images?

    • @StefanBernhard-eu4xe
      @StefanBernhard-eu4xe Год назад

      Same question here.

    • @Angular
      @Angular  Год назад +1

      We're in the process of updating the example linked in the description but for now you can download them directly from the repo:
      github.com/angular/angular/tree/main/aio/content/examples/first-app-lesson-00/src/assets

    • @Angular
      @Angular  Год назад +1

      Here you go: github.com/angular/angular/tree/main/aio/content/examples/first-app-lesson-00/src/assets

  • @oldlonecoder5843
    @oldlonecoder5843 Год назад

    How do you have ts highlighting syntax within the backticks ??? I run the latest vscode [v1.79.2] and the typescript extensions are all running. .. .. .. .. .. ?

    • @Angular
      @Angular  Год назад +1

      Be sure to have the Angular Language Service installed :)

  • @omarbousbia6916
    @omarbousbia6916 6 месяцев назад

    How to add html coloring and autocompletion in the template property just like the video ?

    • @Angular
      @Angular  6 месяцев назад +1

      Angular language service 😊

    • @omarbousbia6916
      @omarbousbia6916 6 месяцев назад

      @@Angular thx

  • @momomoma9120
    @momomoma9120 Год назад +1

    After writing the code , I do not find pictures or titles, as you noticed please answer me why

  • @teboholebakeng6980
    @teboholebakeng6980 4 месяца назад

    I have checked my code and it looks the same as the one in the tutorial. Can someone tell what I'm missing here?
    My code does give me an error and my output doesn't show the images. I wonder where I could have gone wrong. In the tuorial, he imports housingocation but I have housing-location for the interface. Did I miss where he chaged the housing-location to housinglocation?

    • @Pkkinuthia
      @Pkkinuthia 4 месяца назад

      did you get the solution

    • @teboholebakeng6980
      @teboholebakeng6980 4 месяца назад +1

      @@Pkkinuthia I did, thanks.

    • @Pkkinuthia
      @Pkkinuthia 4 месяца назад

      @@teboholebakeng6980 what was the issue? I have the same problem

    • @Pkkinuthia
      @Pkkinuthia 4 месяца назад

      @@teboholebakeng6980 I have the same issue. what was wrong?

    • @mrman4636
      @mrman4636 18 дней назад

      @@teboholebakeng6980 i ned sdolution. bro

  • @KaraniKeith
    @KaraniKeith 2 месяца назад

    I am getting this error on completion of part 4....ERROR TypeError: Cannot read properties of undefined (reading 'name')

  • @ohmegatech666
    @ohmegatech666 2 месяца назад +1

    It bothers me that ng generate interface doesn't add "Interface" to the end of the interface name like it does with components. This makes for very confusing interface names like the housingLocation we have here. How is someone reading this supposed to know that the import of HousingLocation from the app directory is an interface? It just looks like someone misplaced the file from the housing-location folder. It should be called HousingLocationInterface

    • @thor1443
      @thor1443 8 дней назад

      same, the use of names are weird

  • @surakadotme
    @surakadotme Год назад +1

    give me this error 6:11 Failed to execute 'setAttribute' on 'Element': ']' is not a valid attribute name. at EmulatedEncapsulationDomRenderer2.setAttribute

    • @peiruiong7539
      @peiruiong7539 11 месяцев назад

      i think u got extra ']' somewhere, u can check it

  • @ReneeMcDonald-bb8nh
    @ReneeMcDonald-bb8nh Год назад

    Error -please assist. When I type in import { HousingLocation } in the home.component.ts and housing-location.components files I it resolves to '../housing-location. But in the video it resolves to '../housinglocation. I think this is leading to the following error when I run it:
    src/app/home/home.component.ts:18:81 - error NG8002: Can't bind to 'housingLocation' since it isn't a known property of 'app-housing-location'.

    • @bigjamar
      @bigjamar Год назад

      you must to change the name of th interface '../housing-location' to '../housinglocation' and the name of the file must be the same housinglocation.ts

  • @jediampm
    @jediampm Год назад +2

    Hi, why using interface ? why not define a type?
    in other lang interface is a contract that only indicate the behavior of class, which means which methods to implement. Not to define which properties may or should exist. . i even read long a time ago in your docs that you use a class to define a type. For me when i start Angular 2+, this is kind of confusing when using class or interface or even type to indicate the blueprint of my data.
    Another thing is missing is extension with interface p.e: house-location.interface.ts.

    • @Angular
      @Angular  Год назад +2

      TypeScript prefers interfaces over type aliases because you can get better errors. You can find out more here:
      www.typescriptlang.org/play#example/types-vs-interfaces

  • @jonatanaguilar7710
    @jonatanaguilar7710 5 месяцев назад

    If it works for anyone
    I didn't see the images, but it was my mistake because I made the assets folder inside src.
    Solution: Move the folder to public so that they can be seen in the page.

    • @martinjanev7658
      @martinjanev7658 4 месяца назад

      I think it`s from some version after this series, that has that solution to the problem. v18+ works with this advice. tnx

  • @joelvilela4764
    @joelvilela4764 11 месяцев назад

    Can you please teach me how to add boostrap to this new version of Node?

  • @yatharthdeshpande7671
    @yatharthdeshpande7671 Год назад

    I am not getting the 10:36 this output I have checked the code it is same
    can someone please help

    • @omnamahshivye
      @omnamahshivye Год назад +4

      Try this

    • @zoro9878
      @zoro9878 Год назад

      worked. But i think the problem was with the interface data for photos.
      @@omnamahshivye

    • @JoseLopez-uc2hn
      @JoseLopez-uc2hn Год назад

      @@omnamahshivye Thanks man, I had the same error and I was writing [housingLocation]="housingLocationList" instead.

  • @domelp5930
    @domelp5930 8 месяцев назад

    Where do I get the Images?

    • @Angular
      @Angular  8 месяцев назад

      You can check the GitHub repo. Also, any images are fine for the most part.

  • @keshavjhanwar9586
    @keshavjhanwar9586 9 месяцев назад +1

    Hello
    @ 7:56 in the code on line no. 8, you forgot to mention that we have to update the imports line to include HousingLocationComponent,
    However, @ 8:12 mins it automatically appears without you mentioning it.
    Please consider that we are beginners to Angular so we need step to step tutorial. I had just wasted 1 complete hour to debug the error as to why the compiler is always throwing errors when i had followed the same exact steps.

    • @keshavjhanwar9586
      @keshavjhanwar9586 9 месяцев назад +1

      Also, ng generate interface housingLocation now creates a template named housing-Location. I spent 20 mins to verify that this was not creating the compiler error. Please rectify if you can

  • @AnweshAdhikari
    @AnweshAdhikari 8 месяцев назад

  • @domingos_m
    @domingos_m 5 месяцев назад +1

    The naming conventions in this tutorial sucks to bits. Goodness me

    • @marktechson
      @marktechson 5 месяцев назад

      What's an example so we can do better in the future?

  • @edlmiranda
    @edlmiranda 3 месяца назад

    Comment #67

  • @Mastyx-dev
    @Mastyx-dev 3 месяца назад

    at minute 6:50 if I don't insert the question mark:
    since always:
    TypeError: Cannot read properties of undefined (reading 'name')
    at HousingLocationComponent_Template (housing-location.component.html:3:7)
    at executeTemplate (core.mjs:11772:5)
    at refreshView (core.mjs:13325:7)
    at detectChangesInView (core.mjs:13533:5)
    at detectChangesInViewIfAttached (core.mjs:13495:3)
    at detectChangesInComponent (core.mjs:13484:3)
    at detectChangesInChildComponents (core.mjs:13545:5)
    at refreshView (core.mjs:13377:7)
    at detectChangesInView (core.mjs:13533:5)
    at detectChangesInViewIfAttached (core.mjs:13495:3)
    Does it happen to you too?

    • @Bastardovl
      @Bastardovl 2 месяца назад

      I think you must remove "?" signals

  • @saadbasit3345
    @saadbasit3345 4 месяца назад

    I have followed everything but it is giving an error on input.
    @input() housingLocation!:HousingLocation;
    TS1329: 'input()' accepts too few arguments to be used as a decorator here. Did you mean to call it first and write '@input()()'? [plugin angular-compiler]
    src/app/housing-location/housing-location.component.ts:20:2:
    20 │ @input() housingLocation!:HousingLocation;
    ╵ ~~~~~~~~

    • @abstergo72
      @abstergo72 3 месяца назад

      Input with capital 'i'