Lintree Clone in Angular

#angular #linktree #clone

Install Angular cli to create Angular project

npm install -g @angular/cli

Run the cli command to create new Angular Project

ng new lintree-clone-angular

Navigate to the project

cd lintree-clone-angular

Project Structure

Let's now start with updating app.component.html according to below

<main>
  <div class="container" *ngFor="let item of data">
    <div class="header-container">
      <div class="share-button">
        <a (click)="shareUrl()">
          <svg width="16" height="16" viewBox="0 0 16 16" enable-background="new 0 0 24 24" class="sc-gKsewC iPWGYb">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M10.6464 3.85347L11 4.20702L11.7071 3.49992L11.3536 3.14636L8.35355 0.146362H7.64645L4.64645 3.14636L4.29289 3.49992L5 4.20702L5.35355 3.85347L7.5 1.70702V9.49992V9.99992H8.5V9.49992V1.70702L10.6464 3.85347ZM1 5.49994L1.5 4.99994H4V5.99994H2V14.9999H14V5.99994H12V4.99994H14.5L15 5.49994V15.4999L14.5 15.9999H1.5L1 15.4999V5.49994Z"
              fill="currentColor"></path>
          </svg>
        </a>
      </div>
    </div>
    <div class="image-container">
      <img ngSrc="/assets/images/picture.png" width="100" height="200" priority alt="">
    </div>
    <div class="text-container">
      <h1>@{{item.name}}</h1>
      <h6>{{item.desc}}</h6>
    </div>

    <div class="tile-container" *ngFor="let item of data[0].links">
      <a class="tile" href={{item.url}} target="_blank">
        <div class="icon">
          <img src={{item.icon}} alt="">
        </div>
        <p>{{item.name}}</p>
        <a class="tile-share-button" href={{item.url}} target="_blank" aria-label="link">
          <svg width="18" height="18" viewBox="0 0 16 16" enable-background="new 0 0 24 24" class="sc-gKsewC iPWGYb">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M10.6464 3.85347L11 4.20702L11.7071 3.49992L11.3536 3.14636L8.35355 0.146362H7.64645L4.64645 3.14636L4.29289 3.49992L5 4.20702L5.35355 3.85347L7.5 1.70702V9.49992V9.99992H8.5V9.49992V1.70702L10.6464 3.85347ZM1 5.49994L1.5 4.99994H4V5.99994H2V14.9999H14V5.99994H12V4.99994H14.5L15 5.49994V15.4999L14.5 15.9999H1.5L1 15.4999V5.49994Z"
              fill="currentColor"></path>
          </svg>
        </a>
      </a>
    </div>
  </div>
</main>
<footer>
  <div class="footer-container" *ngFor="let item of data">
    <p>&copy; 2023 Linktree Clone by {{item.name}}</p>
  </div>
</footer>

Next add in app.component.scss mentioned below

main {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.container {
    width: 91%;
    max-width: 680px;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-container {
    text-align: center;

    h1 {
        font-size: 20px;
    }

    h6 {
        margin-top: 0;
        font-size: 18px;
        margin-bottom: 30px;
    }
}

.header-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;

    .share-button {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background-color: rgb(240, 240, 240);
    }

    .share-button svg {
        margin-left: 12px;
        margin-top: 10px;
        color: rgb(0, 0, 0);
    }
}

.image-container {
    margin-top: 10px;
    height: 96px;
    width: 96px;
    border-radius: 48px;
    overflow: hidden;
}

.image-container img {
    height: 100%;
}

.tile-container {
    width: 100%;
    background-color: rgb(37, 37, 37);
    margin: 7px;
    border-radius: 17px;
    display: flex;
    justify-content: space-between;

    a {
        text-decoration: none;
        color: rgb(240, 240, 240);
    }

    .tile {
        width: 100%;
        background-color: rgb(37, 37, 37);
        border-radius: 17px;
        display: flex;
        justify-content: space-between;
    }

    .icon {
        margin: 15px 15px;
        width: 44px;
        height: 44px;
    }

    .tile:hover {
        transition: cubic-bezier(.07, 1.41, .82, 1.41) 0.2s;
        transform: scale(1.02);
    }

    .tile-share-button {
        margin: 15px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background-color: rgb(52, 52, 52);
    }

    .tile-share-button svg {
        margin-left: 12px;
        margin-top: 10px;
    }

    p {
        font-size: 20px;
    }

}

.footer-container {
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    p {
        margin: 10px;
    }
}

Updateapp.component.ts with below

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'linktree-clone-angular';

  data: any;
  name: any;
  href: any;

  constructor(private http: HttpClient, private router: Router){}

  ngOnInit() {
    this.http.get('/assets/data.json').subscribe(data => {
      this.data = data;
      this.name = data;
      console.log(this.data);
    });
  }

  shareUrl(){
    if (navigator.share) {
      navigator.share({
        title: 'My Angular App',
        text: 'Check out this awesome Angular app',
        url: window.location.href
      });
    }
  }
}

Modify app.module.ts as shown below

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgOptimizedImage } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgOptimizedImage,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding all details indata.json

[
    {
        "name": "Manthanank",
        "desc":"Front End Developer",
        "iconurl": "/assets/images/picture.png",
        "links": [
            {
                "name": "Website",
                "icon": "/assets/svg/website.svg",
                "url": "http://manthanank.web.app"
            },
            {
                "name":"Twitter",
                "icon": "/assets/svg/twitter.svg",
                "url": "https://twitter.com/manthan_ank"
            },
            {
                "name":"LinkedIn",
                "icon": "/assets/svg/linkedin.svg",
                "url": "https://www.linkedin.com/in/manthanank"
            },
            {
                "name":"GitHub",
                "icon": "/assets/svg/github.svg",
                "url": "https://github.com/manthanank"
            },
            {
                "name":"Facebook",
                "icon": "/assets/svg/facebook.svg",
                "url": "https://www.facebook.com/manthanank/"
            },
            {
                "name":"YouTube",
                "icon": "/assets/svg/youtube.svg",
                "url": "https://www.youtube.com/@manthanank"
            },
            {
                "name":"Instagram",
                "icon": "/assets/svg/instagram.svg",
                "url": "https://www.instagram.com/manthan_ank/"
            }
        ]
    }
]

Here is how assets folder looks

Demo Link: https://linktree-clone-angular.vercel.app/

Repo Link: GitHub - manthanank/linktree-clone-angular: Linktree Clone in Angular

Preview:

Please support and Don't forget to give star⭐

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More