Customizing components and directives (Part 4)
Vložit
- čas přidán 4. 05. 2023
- Learn how to build the structure for the housing component, customize components, add styling to the app, and more!
Resources:
App styles → goo.gle/homes-app-styles
App data → goo.gle/homes-app-listings
Completed code → goo.gle/3pfilhJ
Catch the next episode, How to route in Angular → goo.gle/3ntFigR
Watch more episodes of Learning Angular → goo.gle/Learning-Angular
Subscribe to Angular → goo.gle/Angular
#Angular - Zábava
Watch more episodes of Learning Angular→ goo.gle/Learning-Angular
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! 😀
Loving these tutorials! More please!
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?
yeah good tutorial, just back to Angular!
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.
details.component.css does not exist in the files we've downloaded in VS code
any luck wtih this? Having the same issue.
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
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;
}
I Could fine any Details CSS so web page images are not aliened properly so to solve this?
Don't forget put app-housing-location into a new section
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
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. .. .. .. .. .. ?
Be sure to have the Angular Language Service installed :)
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.
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.
@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).
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.
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 😩
@@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
REALLY thank you man, you saved my day
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'.
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
extensions used in vs code that helps you use and type html and typescript snippets easily ?
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
House images are missing in the assets folder of the zip file.
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
@@Angular There are still no images there :(
❤
After writing the code , I do not find pictures or titles, as you noticed please answer me why
change housingLocationList to housingLocation
From where do we get the missing house images?
Same question here.
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
Here you go: github.com/angular/angular/tree/main/aio/content/examples/first-app-lesson-00/src/assets
is there a details.css file?
Did you ever figure it out?
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.
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
How to add html coloring and autocompletion in the template property just like the video ?
Angular language service 😊
@@Angular thx
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.
I think it`s from some version after this series, that has that solution to the problem. v18+ works with this advice. tnx
I am not getting the 10:36 this output I have checked the code it is same
can someone please help
Try this
worked. But i think the problem was with the interface data for photos.
@@omnamahshivye
@@omnamahshivye Thanks man, I had the same error and I was writing [housingLocation]="housingLocationList" instead.
Where do I get the Images?
You can check the GitHub repo. Also, any images are fine for the most part.
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.
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
The naming conventions in this tutorial sucks to bits. Goodness me
What's an example so we can do better in the future?
give me this error 6:11 Failed to execute 'setAttribute' on 'Element': ']' is not a valid attribute name. at EmulatedEncapsulationDomRenderer2.setAttribute
i think u got extra ']' somewhere, u can check it
Can you please teach me how to add boostrap to this new version of Node?