Icon / Route / Text are coded as variable so that editable for each of using.
Example of use
(app.component.html)
<app-header
[leftIcon]="headerLeftIcon"
[leftIconLink]="headerLeftIconLink"
[rightIcon]="headerRightIcon"
[rightIconLink]="headerRightIconLink"
[headerText]="headerText"></app-header>
[Properties]
leftIcon: source directory for left icon,
leftIconLink: routelink for clicking of left icon,
rightIcon: source directory for right icon,
rightIconLink: routelink for clicking of right icon,
headerText: text content which shows center of heder
minse0n
commented
1 year ago
Component_Header (Reusable)
Icon / Route / Text are coded as variable so that editable for each of using.
Example of use (app.component.html)
<app-header[leftIcon]="headerLeftIcon" [leftIconLink]="headerLeftIconLink" [rightIcon]="headerRightIcon" [rightIconLink]="headerRightIconLink" [headerText]="headerText"></app-header>[Properties] leftIcon: source directory for left icon, leftIconLink: routelink for clicking of left icon, rightIcon: source directory for right icon, rightIconLink: routelink for clicking of right icon, headerText: text content which shows center of heder
(app.component.ts)
export class AppComponent {headerLeftIcon="../../assets/icons/logoIcon.svg" headerRightIcon="../../assets/icons/loginIcon.svg" headerLeftIconLink="mainPage" headerRightIconLink="loginPage" headerText="EveryCent"}Preview