Using NgFor instead of HTML

3552 views html
1

I'm relatively new to angular, and I know there has got to be a better way than what I'm doing. I'd like to use ngfor to loop through and spit out this info vs typing it all by hand. Any recommendations?

Here's my code:

<section class="eighth-section our-work">
<h2 class="uppercase">Our work</h2>
<a target="blank" href=""><img class="lazy our-work__img" src="./assets/images/our-work/kma-logo.png" alt="KMA Logo"></a>
<a target="blank" href="https://fwchiro.com/forms/"><img class="lazy our-work__img" src="./assets/images/ourwork/DF_FWChiroLogo.png"
        alt="Functional Wellness Chiropractic logo"></a>
<a target="blank" href="https://www.608motorsports.com/"><img class="lazy our-work__img" src="./assets/images/ourwork/DF_608logo.png"
        alt="608 Motorsports Logo"></a>
<a target="blank" href="https://dektex.com/"><img class="lazy our-work__img" src="./assets/images/ourwork/DF_dektexlogo.png"
        alt="DekTex Logo"></a>
<a target="blank" href="https://kswconstruction.com/"><img class="lazy our-work__img" src="./assets/images/ourwork/DF_KSWLogo.png"
        alt="KSW Construction Logo"></a>
<a target="blank" href="https://bzcustomfinishing.com/"><img class="lazy our-work__img" src="./assets/images/ourwork/DF_BZlogo.png"
        alt="BZ Custom Finishing Logo"></a>
<a target="blank" href="https://familyfirstverona.com/"><img class="lazy our-work__img" src="./assets/images/ourwork/DF_famfirstlogo.png"
        alt="Family First Logo"></a>
<a target="blank" href="https://hamiltonconcretepro.com/"><img class="lazy our-work__img" src="./assets/images/ourwork/Hamilton_Logo.png"
        alt="Hamilton Concrete Logo"></a>

Item's I'd like to use for looping are the following tags: src href alt

Thanks in advance!

answered question

1 Answer

0

in your component:

public links = [
  {src: 'your_src_1', href: 'your_href_1', alt: 'your alt text 1'},
  {src: 'your_src_2', href: 'your_href_2', alt: 'your alt text 2'},
  {src: 'your_src_3', href: 'your_href_3', alt: 'your alt text 3'},
  {src: 'your_src_4', href: 'your_href_4', alt: 'your alt text 4'},
];

in your template:

<a *ngFor="let link of links" target="blank" [href]="link.href"><img class="lazy our-work__img" [src]="link.src" [alt]="link.alt"></a>

should do the trick

the key is you need a data array somewhere that contains objects of all your parameters. then you can use ngFor to loop through them and use the dataset results.

posted this

Have an answer?

JD

Please login first before posting an answer.