refactor(HeroSectionComponent): Convert to standalone (#1778)

WISE-Community · May 6, 2024 · e9c20aa · e9c20aa
1 parent 8824e04
commit e9c20aa
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 49 deletions.
diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
@@ -7,11 +7,13 @@ import { LibraryModule } from '../modules/library/library.module';
 import { SharedModule } from '../modules/shared/shared.module';
 import { DiscourseLatestNewsComponent } from './discourse-latest-news/discourse-latest-news.component';
 import { BlurbComponent } from '../modules/shared/blurb/blurb.component';
+import { HeroSectionComponent } from '../modules/shared/hero-section/hero-section.component';
 
 @NgModule({
   imports: [
     BlurbComponent,
     CommonModule,
+    HeroSectionComponent,
     HomeRoutingModule,
     LibraryModule,
     SharedModule,

diff --git a/src/app/modules/shared/hero-section/hero-section.component.spec.ts b/src/app/modules/shared/hero-section/hero-section.component.spec.ts
@@ -1,24 +1,20 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { HeroSectionComponent } from './hero-section.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 describe('HeroSectionComponent', () => {
   let component: HeroSectionComponent;
   let fixture: ComponentFixture<HeroSectionComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [HeroSectionComponent],
-      imports: [],
-      schemas: [NO_ERRORS_SCHEMA]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HeroSectionComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [HeroSectionComponent]
+      }).compileComponents();
+      fixture = TestBed.createComponent(HeroSectionComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
 
   it('should create', () => {
     expect(component).toBeTruthy();

diff --git a/src/app/modules/shared/hero-section/hero-section.component.ts b/src/app/modules/shared/hero-section/hero-section.component.ts
@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   ContentChild,
@@ -7,45 +8,32 @@ import {
   ViewChild,
   ElementRef
 } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
+  imports: [CommonModule, FlexLayoutModule],
   selector: 'app-hero-section',
-  templateUrl: './hero-section.component.html',
-  styleUrls: ['./hero-section.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  standalone: true,
+  styleUrl: './hero-section.component.scss',
+  templateUrl: './hero-section.component.html'
 })
 export class HeroSectionComponent {
-  @Input()
-  imgSrc: string;
-
-  @Input()
-  imgDescription: string;
-
-  @Input()
-  imgSources: Object;
-
-  @Input()
-  headline: string;
-
+  @ViewChild('bgRef') bgRef: ElementRef;
+  protected bgStyle: SafeStyle;
+  @Input() headline: string;
   @ContentChild('headlineTemplate', { static: false }) headlineRef: TemplateRef<any>;
-
-  @Input()
-  tagline: string;
-
-  @ContentChild('taglineTemplate', { static: false }) taglineRef: TemplateRef<any>;
-
+  @Input() imgDescription: string;
+  @Input() imgSources: Object;
+  @Input() imgSrc: string;
   @ContentChild('sideTemplate', { static: false }) sideRef: TemplateRef<any>;
+  @Input() tagline: string;
+  @ContentChild('taglineTemplate', { static: false }) taglineRef: TemplateRef<any>;
 
-  @ViewChild('bgRef') bgRef: ElementRef;
-
-  bgStyle: SafeStyle;
-
-  constructor(private sanitizer: DomSanitizer) {
-    this.sanitizer = sanitizer;
-  }
+  constructor(private sanitizer: DomSanitizer) {}
 
-  ngAfterViewInit() {
+  ngAfterViewInit(): void {
     this.bgRef.nativeElement.onload = () => {
       this.bgStyle = this.getBgStyle();
     };
@@ -55,8 +43,7 @@ export class HeroSectionComponent {
    * Returns the background-image css value for imgSrc
    * @returns {SafeStyle}
    */
-  getBgStyle(): SafeStyle {
-    const style: string = `url(${this.bgRef.nativeElement.currentSrc})`;
-    return this.sanitizer.bypassSecurityTrustStyle(style);
+  private getBgStyle(): SafeStyle {
+    return this.sanitizer.bypassSecurityTrustStyle(`url(${this.bgRef.nativeElement.currentSrc})`);
   }
 }
diff --git a/src/app/modules/shared/shared.module.ts b/src/app/modules/shared/shared.module.ts
@@ -23,7 +23,6 @@ const materialModules = [
 ];
 
 import { CallToActionComponent } from './call-to-action/call-to-action.component';
-import { HeroSectionComponent } from './hero-section/hero-section.component';
 import { SelectMenuComponent } from './select-menu/select-menu.component';
 import { EditPasswordComponent } from './edit-password/edit-password.component';
 import { UnlinkGoogleAccountConfirmComponent } from './unlink-google-account-confirm/unlink-google-account-confirm.component';
@@ -45,13 +44,11 @@ import { PasswordModule } from '../../password/password.module';
     materialModules,
     FlexLayoutModule,
     CallToActionComponent,
-    HeroSectionComponent,
     SelectMenuComponent,
     EditPasswordComponent
   ],
   declarations: [
     CallToActionComponent,
-    HeroSectionComponent,
     SelectMenuComponent,
     EditPasswordComponent,
     UnlinkGoogleAccountConfirmComponent,