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>© 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⭐
Top comments (0)