Customizing components and directives (Part 4)

[@Angular]

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

[@doctorcocktor1894]

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

[@dannyacuna]

any luck wtih this? Having the same issue.

[@jeverydk]

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]

​@@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!

[@NateReprogle]

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! 😀

[@it-patsan-us4719]

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; }

[@ohmegatech666]

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

[@KaraniKeith]

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

[@ohmegatech666]

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

[@ax4178]

is there a details.css file?

[@JoseLopez-uc2hn]

Did you ever figure it out?

[@bogdan_the_computer]

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

[@JoseLopez-uc2hn]

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]

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.

[@daviddzul7537]

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

[@cscsun3796]

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

[@jediampm]

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]

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

[@kiranPollard-dz5gc]

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.

[@sumedhkapoor3436]

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

[@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]

@@Angular There are still no images there :(

[@domingos_m]

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

[@marktechson]

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

[@m31-p9s]

Loving these tutorials! More please!

[@edlmiranda]

Comment #67

[@Codeline-Dreamer]

@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]

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]

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]

@@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]

REALLY thank you man, you saved my day

[@rettaguntadeepak3697]

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

[@jonatanaguilar7710]

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]

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

[@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]

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

[@hieutrantrung8475]

yeah good tutorial, just back to Angular!

[@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]

Be sure to have the Angular Language Service installed :)

[@Mastyx-dev]

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]

I think you must remove "?" signals

[@9delta11]

From where do we get the missing house images?

[@StefanBernhard-eu4xe]

Same question here.

[@Angular]

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]

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

[@AnweshAdhikari]

❤

[@sualk6937]

Love this guy!

[@10_Anonymous4]

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

[@Guidje]

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

[@surakadotme]

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

[@peiruiong7539]

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

[@omarbousbia6916]

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

[@Angular]

Angular language service 😊

[@omarbousbia6916]

@@Angular thx

[@momomoma9120]

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

[@kevin-howard]

[@kevin-howard]

change housingLocationList to housingLocation

[@teboholebakeng6980]

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]

did you get the solution

[@teboholebakeng6980]

@@Pkkinuthia I did, thanks.

[@Pkkinuthia]

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

[@Pkkinuthia]

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

[@domelp5930]

Where do I get the Images?

[@Angular]

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

[@yatharthdeshpande7671]

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

[@omnamahshivye]

Try this

[@zoro9878]

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

[@JoseLopez-uc2hn]

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

[@keshavjhanwar9586]

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]

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

[@joelvilela4764]

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

[@saadbasit3345]

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]

Input with capital 'i'